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: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
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é : 26 Oct 2014 à 11:32
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 - 30 Jan 2015 à 09:10
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Actif
Points: 8142
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Oct 2014 à 11:48
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: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Oct 2014 à 17:45
ç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: 14 Août 2009
Pays: France
Status: Actif
Points: 8142
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Oct 2014 à 18:04
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: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1950
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Oct 2014 à 14:55
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: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Oct 2014 à 15:28
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 - 28 Oct 2014 à 15:30
Haut de la page
running59 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Juin 2014
Pays: FRANCE
Status: Inactif
Points: 137
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer running59 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 14 Nov 2014 à 09:29
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: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 14 Nov 2014 à 19:16
merci ! Geek
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1950
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 16 Nov 2014 à 12:15
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: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5350
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 18 Nov 2014 à 14:37
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,047 secondes.
Réserver en ligne un taxi, vtc, navette