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  - Flat design, photos et dynamisme...
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Flat design, photos et dynamisme...

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

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5320
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Sujet: Flat design, photos et dynamisme...
    Envoyé : Oct 26 2014 à 10:32am
Hello,

Ce tutoriel est la suite de Page d'accueil dynamique et classes personnalisées

Il va vous expliquer comment réaliser une page d'accueil comme celle-ci, "flat", avec de jolies photos et dynamique au survol de souris, avec apparition d'éléments complémentaires, tout en douceur ^^


Sur la capture précédente, la vignette 1 est en survol par la souris, et fait apparaître le sous-titre, et un élément complémentaire, le lien partager en rouge.

L'exemple est visible ici : http://www.stalagtic.com/DidacTIC1.htm

Tutoriel disponible ici : http://youtu.be/xsJdtfq890c

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/ (sur le site, faites un clic-droit enregistrer sous), et placez le fichier transit.min.js dans le dossier de votre projet

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


Code CSS
.news{
  cursor:pointer;
  overflow: hidden !important;
}


Code JAVASCRIPT/JQUERY
$(document).ready(function() {
  $(".panneaurouge").css({top:'340px',left:'300px'});
  $(".panneaubas").css({top:'340px',left:'0px'});
});


    $(".news").hover(
        function () {
          $(".image", this).transition({opacity:'0.7',duration: 200 });
          $(".panneaubas", this).transition({top:'280px',duration:500});
          $(".panneaurouge", this).transition({top:'252px',duration:500});
        },
        function () {
          $(".image", this).transition({opacity:'1',duration: 200 });
          $(".panneaubas", this).transition({top:'340px',duration:500});
          $(".panneaurouge", this).transition({top:'340px',duration:500});
        });

$("#WEe464a23c70").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 - Jan 30 2015 à 8:10am
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 7812
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 26 2014 à 10:48am
super taf Larsène Wink.

Hâtes de voir tout ca fonctionner correctement !
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5320
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 26 2014 à 4:45pm
ça y est, le tuto est en ligne ! c'est du boulot, vraiment...
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

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

ça y est, le tuto est en ligne ! c'est du boulot, vraiment...

bravo à toi mon Larsène Clap
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Apr 20 2008
Pays: France
Status: Inactif
Points: 1934
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 28 2014 à 1:55pm
Bonjour à tous,

C'est non seulement un travail extra mais en plus avec les vidéos explicatives, c'est un trésor pour ceux qui comme moi sont des néophytes autodidactes qui comptent sur les produits comme OE et sur la bonté des PROS qui comme Larsene nous offrent de tels bijoux pour nos sites personnel ou d'assos.

Alors les mots sont faibles, mais MERCI ! BRAVO ! MERRRRRRCCIIIII !!

Bonne continuation à tous.
Cordialement,
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5320
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 28 2014 à 2:28pm
Bon, bien sûr, si cela vous plaît et vous est utile, j'ai un petit bouton ... "Faire un don" Approve

Ces tutos sont un moyen efficace d'apprendre, je trouve, ne serait-ce qu'en observant la méthode de travail, et ce en peu de temps ! ça permet de découvrir ce qu'on peut faire facilement.


Edité par Larsene - Oct 28 2014 à 2:30pm
Haut de la page
running59 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Jun 27 2014
Pays: FRANCE
Status: Inactif
Points: 120
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer running59 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 14 2014 à 8:29am
Un grand merci pour ce travail remarquable, je suis également un néophyte mais le tuto est tellement bien argumenté que s'en devient simple. MERCI .MERCI......

Bonne journée à tous
running59
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5320
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 14 2014 à 6:16pm
merci ! Geek
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Apr 20 2008
Pays: France
Status: Inactif
Points: 1934
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 16 2014 à 11:15am
Bonjour à tous Handshake

Je suis émerveillé Wacko, bien sur je n'aurais pas à m'en servir, mais quelle maîtrise professorale dans la manière de créer ces didacticiels, et que c'est beau.

Merci pour ce travail, javais déjà fait appel pour un des premier didacticiel "fenêtre modale" j'avais sur OE fait un petit don substenciel pour un des projets qui te tenais à cœur, je ne sais comment les suites se sont passées, mais il est vrai que cette somme de travail mérite que ceux qui en bénéficient ait un geste de reconnaissance.
Cordialement, Thumbs Up
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5320
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 18 2014 à 1:37pm
Merci bcp Maurice306 !

J'espère par ces didacticiels montrer que l'usage de OE est tout simple est que c'est une de ses grances forces.

Merci à toi pour ton don à l'équipe de OE à l'époque de mon premier didacticiel (entre temps, c'est vrai, j'ai rajouter un lien donation à mon intention...). L'équipe n'a pas encore ajouté les ancres aux fonctions de OE, mais j'espère que ça ne saurait tarder ! J'avais fais un don à OE également à l'époque pour cette fonctionalité également.

Et si tu as besoin d'autres pistes, n'hésite pas !
Haut de la page
 Répondre Répondre Page  12>
  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,031 secondes.
Réserver en ligne un taxi, vtc, navette