BullGuard Antivirus Sale - 60% Off with 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


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
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é : 25 Oct 2014 à 21:11
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 - 26 Oct 2014 à 17:52
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


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

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


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

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


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

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 25 Oct 2014 à 22:03
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


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Oct 2014 à 17:53
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: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2015 à 11:03
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


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2015 à 12:07
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: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2015 à 12:16
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 - 22 Mai 2015 à 12:24
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2015 à 12:22
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 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.