AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Fond de page animé/défilant [CSS3 + (Template OU jQuery)]

    Partagez
    Invité

    le Lun 24 Fév 2014 - 22:47

    Bonjour !

    Si certains ont déjà joué à Saints Row : The Third, ils auront sûrement déjà vu le fond défilant sur les menu pauses & co. Pour ceux que cela tenterait, voici un petit tuto pour faire de même sur n'importe quelle page web ^^ !

    Résultat : Ceci n'est pas un gif, c'est un iframe sur une page contenant un fond animé (si si ^^) !


    jQuery ou Template ???

    Le fond va occuper une div située derrière tout le contenu de la page. Pour cela, eh bien ... Il vous faut une div à pimper ! Sur les forums en particulier, deux solutions sont possibles :

    - soit l'ajout d'une div dans le template overall_header, juste après la balise ouvrante du body.
    Code:
    <body><div class="abs"></div>

    - soit l'ajout via une commande en jQuery, dans la section JavaScript de la Partie Admin.
    Code:
    $(function(){
        $('body').prepend('<div class="abs"></div>');
    });

    Certains ont la hantise de toucher aux templates, d'autres sont anti-JS, vous avez donc le choix ! Sachant que, dans l'absolu, le résultat est le même (une div possédant une classe nommée), faites-vous plaisir !


    Ensuite, c'est dans le CSS que tout se joue ! Pour avoir la base, copiez-collez le code suivant dans le CSS de votre site/forum.

    A ajouter au CSS

    Code:
    .abs {
     position:fixed;
     top:0;
     left:0;
     width:100%;
     height:100%;
     overflow:hidden;
     z-index:1;
    }

    @-moz-keyframes swim {
        from { background-position: 0 0; }
        to  { background-position: -80px 0; }
    }

    @-webkit-keyframes swim {
        from { background-position: 0 0; }
        to  { background-position: -80px 0; }
    }

    @keyframes swim {
        from { background-position: 0 0; }
        to  { background-position: -80px 0; }
    }

    .abs:before {
     content:"";
     position:absolute;
     top:-50%;
     left:-50%;
     width:200%;
     height:200%;
     z-index:2;
        background-image: url("http://img11.hostingpics.net/pics/769285imgSnt.jpg");
        background-repeat: repeat;
        background-position: 0;
        -moz-animation: swim 5s linear infinite;
        -webkit-animation: swim 5s linear infinite;
        animation: swim 5s linear infinite;

        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    .bodyline {
        position:relative;
        z-index:3;
    }


    Le pourquoi du comment (si vous voulez pimper le fond comme un pro !)

    La classe abs :
    La div créée précédemment est fixée (pour éviter que votre fond se retrouve viré dès que l'on descend sur le reste de la page) et mis à 100% de la largeur et hauteur. Overflow en hidden, pratique pour éviter qu'une barre de défilement s'ajoute dès que l'on oriente le fond !

    Les keyframe :
    on donne un nom (ici swim) à un système de transition. Etant donné que mon image de fond fait 80px de large, je dis qu'il faut qu'entre le début et la fin de l'animation, le fond se soit décalé de -80px (vers la gauche donc).

    abs:before, WTF ?
    le :before spécifie qu'on ajoute un élément (vide ici) à la div abs, que l'on va régler comme s'il s'agissait d'une div lambda. Etant donné que mon fond est orienté, je pousse la largeur et la hauteur à 200% (et je décale en conséquence pour à peu près centrer) de façon à éviter que le fond se retrouve coupé dans les angles.

    Pour ralentir/accélérer l'animation du fond, il faut changer la durée de la transition 5s donne sur l'exemple un mouvement assez calme et posé, ce qui est plutôt bien si l'on veut éviter de rendre les lecteurs malades avec des trucs qui bougent partout !

    Enfin, la rotation permet de faire tourner tout l'élément :before de X degrés. Pour maximiser la compatibilité, il est bon de laisser les préfixes de navigateurs !


    IMPORTANT : POUR LES FORUMS

    - N'oubliez pas, sur les forums, de bien conserver la dernière règle CSS, celle du bodyline. En effet, nous avons des éléments positionnés en absolu et si l'on ne force pas le contenu du forum à se trouver au dessus du fond créé, vous risquez de vous retrouver avec votre magnifique fond animé ... Et rien d'autre !

    - DESACTIVEZ L'OPTIMISATION DU CSS, SINON LES KEYFRAMES NE MARCHERONT PAS (et de ce fait, l'animation non plus) !!!


    Résumé :

    - Créez une div nommée, que ce soit via jQuery ou modification de template
    - Collez le CSS
    - Changez l'adresse de l'image de fond
    - Changez la valeur de la largeur dans le keyframe en la réglant à celle de votre image (pour éviter que l'animation fasse des "sauts")
    - Changez la durée de la transition pour faire varier la vitesse
    - Désactivez l'optimisation du CSS (sinon bye-bye l'animation du fond)
    - Vérifiez que vous avez mis votre "conteneur" de page en relatif avec un z-index pour que celui-ci reste bien au dessus du fond animé

    - Enjoy it !

    PS : Pour les crédits, merci de noter une référence à Never Utopia sur le forum ou le site !
    (et, même si je n'ai rien mis en HIDE, un petit merci fait toujours plaisir :) )

    Tuto en partie réalisé grâce à des explications sur StackOverflow. En cas de soucis, mettez-vous à Google et à l'anglais, ça marche nickel ! (ou demandez-moi, je mors pas ^^")


    Dernière édition par Alec Kuro le Lun 10 Mar 2014 - 2:19, édité 1 fois
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Dim 9 Mar 2014 - 18:53

    Salut Alec !

    Désolé du retard de réponse :/
    Ton tutoriel est très bien présenté, ça fait plaisir de voir que les mises en formes servent^^ Par contre j'ai un souci concernant ton résultat : personnellement je ne vois pas bouger le fond dans ton iframe. Tu saurais d'où ça vient ?



    Invité

    le Lun 10 Mar 2014 - 1:52

    Pas de soucis ^^

    C'est de ma faute --' !
    En fait je me suis basé sur un code qui utilisait 2 fonds distincts, et j'ai mal nettoyé le code entre le tuto et l'exemple ... Bref, ça devrait marcher maintenant ^^"
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Lun 10 Mar 2014 - 11:35

    Yeah x) ça marche nickel^^
    Très sympa comme animation, même si perso' un fond qui bouge tout le temps j'aurais peur que ça me gêne :hum: mais on doit s'y faire aussi donc à tester.
    Merci beaucoup pour ce tutoriel en tout cas ! Il plaira très certainement^^ en plus tu as bien expliqué à quoi servaient chaque élément, c'est parfait.
    Je le déplace dans la partie adéquate Wink



    Contenu sponsorisé

    Aujourd'hui à 13:33


      La date/heure actuelle est Lun 5 Déc 2016 - 13:33