Forum de Graphisme - Best of Graph'
Les inscriptions au forum sont maintenant fermée, en effet, nous ne trouvons pas juste de faire s'inscrire des membres pour rien, vu que le forum en dans un état actuellement passif.
Merci, bien à vous!
BOG.

Remarque : la partie publique du forum, tutoriels, ... restent actifs.

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous


Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

Grimpow

avatar
Membre
Hi all, me revoilà dans un nouveau tuto js/css, qui je l'espère fera revivre cette section :/


Cette fois-ci, je vais encore une fois travailler sur une défilement d'images (normal, étant donné que c'est aussi un forum de graph :o), mais au lieu d'une transition par transparence, je vais faire par déplacement latéral.
A la folio graph quoi x)
Je tiens à préciser que le script s'appuie sur les nouvelles propriétés css3, donc si elles ne sont pas connues par le navigateur, ça donne un résultat un peu barbare x) (mais qui marche quand même)

Pour les curieux, voici une application du script: http://pgorjux1.free.fr/tutos/index.php
Ou mon folio: http://grimpow.lescigales.org/


Pour commencer, on va l'appliquer sur une page vierge.
Bref, on ouvre un nouveau document, on colle le code de base:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Grimp's Tuts</title>
      <style type="text/css">
         * {
            margin:0;   /* Précaution dépréciée, mais infinniment pratique: */
            padding:0;   /* elle permet de mettre les navigateurs à égalité en supprimant les marges et paddings de chacun car ils n'ont bien entendu par les même par défaut :/ */
         } BODY {
            text-align:center;
            color:#000;
            background:#FFF;
         }
      </style>
   </head>
    <body>
      Titre
   </body>
</html>
Rien de bien sorcier ^^

Bon ensuite, faut réfléchir. Sachant qu'on veut un déplacement latéral, il faut déjà un conteneur.
Puis ensuite, pour faire changer, une idée de sprite est la meilleure solution (cf: http://bestofgraph.graphforum.com/t325-les-sprites-en-css)
Pour expliquer, un bon dessin vaut mieux qu'un long discours

Nous avons donc deux blocs, le div rouge et le div bleu
le rouge contient le bleu. Et tout ce qui se trouve hors du bloc rouge est normalement caché grâce à la propriété css overflow:hidden
Ainsi, il suffit juste de faire varier la position du bloc bleu pour changer ce qui est visible !

Donc, on va créer ces deux blocs:
Code:
      <div id="GPConteneur">
         <div id="Move" style="left:0;"></div>
      </div>
GPConteneur est le bloc rouge, et Move le bleu qui bouge.
Donc, c'est parti pour un petit coup de css dans le bloc style afin de fixer la taille de GPConteneur, son overflow
Code:
         DIV#GPConteneur {
            border:1px solid black;
            width:300px;
            height:150px;
            overflow:hidden;   
            display:inline-block;
         }
Puis c'est au tour du div Move
Code:
          DIV#GPConteneur DIV#Move {
            position:relative;
            display:inline-block;
            -moz-transition-property:left;
            -moz-transition-duration:1s;
            -o-transition-property:left;
            -o-transition-duration:1s;
            -webkit-transition-property:left;
            -webkit-transition-duration:1s;
         }
Alors, les dernières lignes du code sont tout droit sorties du css3, qui ne sont pas acceptées par les navigateurs comme IE (quel hasard)
C'est pourquoi pour l'instant, nous devons appliquer un préfixe devant la propriété qui est en fait:
Code:
transition-property:left;
transition-duration:1s;
Que fait-elle ? Elle applique une fonctionnalité de transition progressive entre deux valeurs successives d'une même propriété.
Par exemple: pour left, vu qu'on l'applique à left. Si on a left:50px, qu'on le passe à 0, au lieu de passer directement à 0, l'objet concerné va bouger progressivement jusqu'à atteindre le 0 (genre 40,30,20,10,0 par ex)
Autre exemple d'application: http://bestofgraph.graphforum.com/t477-css-3-les-transitions-sur-les-liens
La deuxième ligne indique en combien de temps la transition doit se faire, ici 1 seconde.

Maintenant, générer par script le contenu du bloc Move:
Code:
      <script type="text/javascript">
         // Tableau contenant les images
         list_img = new Array('1.png', '2.png', '1.png', '2.png');
         
         // largeur pas défaut d'une image
         width_img = 300;

         // calcul de la largeur totale avec toutes les images accolées
         width_box_move = width_img * list_img.length;

         // on stocke le chemin d'accès vers le bloc que l'on bougera plus tard
         obj_move = document.getElementById('Move');

         // on applique la largeur totale précédemment calculée au bloc que l'on bougera
         obj_move.style.width = width_box_move + 'px';

         // on part dans une boucle du tableau, et on ajoute toutes les images au bloc
         for (i = 0, c = list_img.length; i < c; i++) {
            obj_move.innerHTML += '<div style="background-image:url(' + list_img[i] + ');"> </div>';
         }
      </script>
+ le css qui définit correctement les pseudos images du bloc Move
Code:
         DIV#GPConteneur DIV#Move > DIV {
            width:298px;
            height:150px;
            border:1px solid black;
            border-top:0;
            border-bottom:0;
            background-position:center center;

            background-size:contain;
            background-repeat:no-repeat;
            display:inline-block;
         }
Ainsi, on a défini les proportions du bloc et son contenu.
On a donc toute la structure qui est prête, il ne reste plus qu'à l'animer ^.^
Pour ça, on définit une fonction d'animation:
Code:
         function move_box() {
            // on récupère les variables existantes hors de la fonction:
            // largeur de base d'une image, tableau des images,
            // et le bloc que l'on bouge
            width_img;
            list_img;
            obj_move;
            
            // si la position du bloc n'est pas définie,
            // c'est qu'on débute le script
            // il faut donc bouger le bloc d'un cran
            if (!obj_move.style.left) {

               // on bouge donc le bloc d'un cran
               // (une largeur d'image) vers la gauche
               obj_move.style.left = (-width_img) + 'px';   
            } else {

               // on a la position du bloc, on la récupère et analyse en
               // enlevant le 'px' trainant à la fin:
               // parseInt() ne retient que les premiers chiffres d'un texte
               temp = parseInt(obj_move.style.left)
               
               // on bouge l'image d'un cran vers la gauche,
               //donc on retire la largeur width_img
               temp -= width_img;
               
               // Si on a dépassé la largeur du bloc,
               // retournons à la première image
               if (temp <= (-width_img)*list_img.length) {
                  obj_move.style.left = '0px';   
               } else {
                  obj_move.style.left = temp + 'px';   
               }
            }
         }
Et après, on définit une intervalle de temps au cours duquel la fonction sera répétée:
Code:
         timer = setInterval(move_box,5000);

Ce qui devrait donner à la fin:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Grimp's Tuts</title>
        <style type="text/css">
         * {
            margin:0;
            padding:0;
         } BODY {
            text-align:center;
            color:#000;
            background:#FFF;
         } DIV#GPConteneur {
            border:1px solid black;
            width:300px;
            height:150px;
            overflow:hidden;
            display:inline-block;
         } DIV#GPConteneur DIV#Move {
            position:relative;
            display:inline-block;
            -moz-transition-property:left;
            -moz-transition-duration:1s;
            -o-transition-property:left;
            -o-transition-duration:1s;
            -webkit-transition-property:left;
            -webkit-transition-duration:1s;
         } DIV#GPConteneur DIV#Move > DIV {
            width:298px;
            height:150px;
            border:1px solid black;
            border-top:0;
            border-bottom:0;
            background-position:center center;
            display:inline-block;
         }
      </style>
   </head>
    <body>
      Titre<br /><br />
      <div id="GPConteneur">
         <div id="Move" style="left:0;"></div>
      </div>
      <script type="text/javascript">
         list_img = new Array('1.png', '2.png', '1.png', '2.png');
         width_img = 300;
         width_box_move = width_img * list_img.length;
         obj_move = document.getElementById('Move');
         obj_move.style.width = width_box_move + 'px';
         for (i = 0, c = list_img.length; i < c; i++) {
            obj_move.innerHTML += '<div style="background-image:url(' + list_img[i] + ');">&nbsp;</div>';
         }
         function move_box() {
            width_img;
            list_img;
            obj_move;
            if (!obj_move.style.left) {
               obj_move.style.left = (-width_img) + 'px';   
            } else {
               temp = obj_move.style.left.split('px');
               temp = parseInt(temp[0]);
               temp -= width_img;
               if (temp <= (-width_img)*list_img.length) {
                  obj_move.style.left = '0px';   
               } else {
                  obj_move.style.left = temp + 'px';   
               }
            }            
         }
         timer = setInterval(move_box,5000);
      </script>
   </body>
</html>
Arkantos22

avatar
Administrateur
Trop cool, merci pour ce-tuto. Wink

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé
romain42

avatar
Pubeur
Merci grimp pour ce tuto !! Je testerais à l’occase !

@+
Grimpow

avatar
Membre
Pas de quoi ^^
Contenu sponsorisé


Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 

Optimisé pour Mozilla Firefox et Google Chrome
Tous droits reservés - Copyright 2011-2013