Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - Page d'accueil dynamique et classes personnalisées
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Page d'accueil dynamique et classes personnalisées

 Répondre Répondre Page  123>
Auteur
Message
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Sujet: Page d'accueil dynamique et classes personnalisées
    Envoyé : Oct 25 2014 à 8:11pm
Hello,je vous propose ici un didacticiel pour créer une page d'accueil avec des éléments dynamiques simples permettant de découvrir l'usage des classes personnalisée.

La première partie du didacticiel permet de créer une page d'accueil à l'image de celle-ci (la seconde vignette est actuellement survolée par la souris) :


Le résultat est visible sur www.paysdesaverne.fr

Je vous proposerai deux autres variantes, dont je mettrai les liens vers les sujets ici.
--> Flat design, photos et dynamisme...



Le didacticiel en vidéo : http://youtu.be/G69Anbwpf5I

Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé.

Téléchargez Transit ici : http://ricostacruz.com/jquery.transit/

CODE HTML:
<script type="text/javascript" src="jquery.transit.min.js"></script>


CODE CSS:
.ombre {
opacity: 0.5;
}

.news{
cursor:pointer;
}


CODE JAVASCRIPT/JQUERY :
$(document).ready(function() {
  $(".ombre").css({opacity:'0',height:'250px',width:'500px'}).transition({ scale: 0.2});
});

    $(".news").hover(
        function () {
          $(".ombre", this).transition({ scale: 1,opacity:'0.7',duration: 200 });
          $(".titrenews", this).css({"color":"#fff"});
           $(".soustitrenews", this).css("color","#f6f6f6");
        },
        function () {
          $(".ombre", this).transition({ scale: 0.2,opacity:'0',duration: 200 });
          $(".titrenews", this).css("color","#000");
           $(".soustitrenews", this).css("color","#000");
        }
    );   

$("#WEa79ebd0ed2").click(function() {
window.location="http://www.vladstudio.com";
});




Et si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des idées, n'hésitez pas à me faire un don, au regard du travail nécessaire pour le construire, le réaliser, le mettre en ligne, le commenter, etc !
Faire un don


Edité par Larsene - Oct 26 2014 à 4:52pm
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 25 2014 à 8:18pm
upload en cours ...
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8941
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 25 2014 à 8:37pm
yeahhh super Larsène !!!!!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 25 2014 à 8:41pm
Voilà, le didacticiel en vidéo est en ligne !

Ouais je sais, j'ai mis du temps, hein, brosylan ... ^^


Edité par Larsene - Oct 25 2014 à 8:42pm
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8941
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 25 2014 à 9:03pm
Message posté par Larsene Larsene a écrit:

Voilà, le didacticiel en vidéo est en ligne !

Ouais je sais, j'ai mis du temps, hein, brosylan ... ^^

je confirme...Embarrassed
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 26 2014 à 4:53pm
D'accord, mais c'est un sacré boulot quand même ... ingrat ! Tongue
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8941
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : May 22 2015 à 10:03am
je regarde ton tuto de nouveau, je vais voir si l'on peut l'adapter à fancybox ou colorbox Big smile
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : May 22 2015 à 11:07am
heu, c'est pas du tout le même usage Shocked colorbox et fancybox c'est pour du popup !!

Mais colorbox fonctionne bien, aps de pb avec OE. Je l'utilise d'ailleurs sur ce site pour des popup
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 8941
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : May 22 2015 à 11:16am
Message posté par Larsene Larsene a écrit:

heu, c'est pas du tout le même usage Shocked colorbox et fancybox c'est pour du popup !!

Mais colorbox fonctionne bien, aps de pb avec OE. Je l'utilise d'ailleurs sur ce site pour des popup

oui, merci Larsène Wink
Je bosse sur mon projet perso, je vais voir pour adapter (essayer du moins) ton tuto pour des images (de celles la) mais surtout pour des box du même type (je parle de ces box la), c'est le principal en fait que je veux réaliser.
Tu te souviens du site en parallax que je t'ai envoyé?
J'essaye de trouver un script pour les box qui viennent séparer le site mais bon, je crois qu'avec OE, la tache s'annonce "hard" (non Bridet, rien de scabreux !! )


Edité par brolysan - May 22 2015 à 11:24am
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5407
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : May 22 2015 à 11:22am
oh, oui, aucun problème pour cela !
Haut de la page
 Répondre Répondre Page  123>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Réserver en ligne un taxi, vtc, navette