• Eklablog - Un fond animé au scroll

    Eklablog - Un fond animé au scroll

    Vous rêvez d'un fond animé lorsque l'on fait bouger verticalement la page ? (on appelle ça scroller).

    L'astuce est très simple : elle se base sur deux images de fond en mosaïque, celle de derrière (opaque) restant mobile avec la page, celle de devant étant fixée à l'écran.
    Les zones en transparence de l'image de devant laissent voir l'image du dessous, et l'on voit défiler celle-ci en bougeant l’ascenseur.

    Motif 1 : le masque

    Pour ce faire, vous devez en premier lieu chercher un motif graphique à répéter, qui peut être donc mis bout-à-bout sans coupure.
    En anglais, le mot utilisé est pattern, et c'est bien utile de le savoir pour vos recherches.

    Lors de votre choix, gardez en tête qu'il faudra la trouer : c'est-à-dire que le motif devra comporter des zones de transparence.

    Trouer le motif

    Pour ce tuto, je vais choisir des hexagones dans l'idée d'afficher des alvéoles en cire d'abeille.
    Ici mon idée est de laisser les bords en transparence pour animer un reflet en diagonale.

    J'ai donc trouvé mon motif à répéter ici :

    motif abeilles

    Je l'incruste sur une couleur. Et je n'ai plus qu'à effacer proprement les bords avec la gomme ou la baguette magique, ou encore utiliser un outil comme Couleur vers alpha dans The Gimp, Couleur de transparence dans Photofiltre, ou color range dans le menu Select de Photoshop.

    J'obtiens donc ceci :

    motif abeille

    Je vérifie bien que le motif se répète sans coupure et j'ai fini mon masque.

    Motif 2 : le fond opaque

    Maintenant, il me faut réaliser le fond qui animera le reflet au travers des trous de notre masque.

    J'ai donc réalisé un motif en dégradé diagonal, avec la même couleur de fond que mon masque. Et pour rompre la monotonie, j'ai gommé le reflet en dégradé dans l'autre sens. Voici le résultat :

    motif de fond abeilles

    Vérifiez bien que votre fond se répète sans coupure et passez à la suite.

    Intégration sur le blog

    Sur Eklablog, l'image d'arrière-plan que vous entrez dans l'outil de personnalisation est affichée au-dessus de la page (ce qui n'est pas le cas de tous les blogs), nous allons donc appliquer un fond à la page elle-même via le code CSS avant d'ajouter le second fond via l'outil de personnalisation, qui s'affichera par-dessus. ^^

    Ajouter le fond en CSS personnalisé

    Avant de vous ruer sur le code CSS, il vous faut en premier lieu mettre en ligne votre image.

    Pour cela, vous pouvez créer un nouvel article ou une nouvelle page privée, qui vous servira de fourre-tout pour mettre en ligne vos smileys perso, vos icônes et vos fond utilisés dans votre propre code CSS comme ici.

    Une fois mise en ligne, récupérez son URL. (Sur Firefox, il suffit de faire un clic droit et de choisir Copier l'adresse de l'image, il ne vous restera plus qu'à la coller en attendant dans un bloc-note).

    Ensuite, allez dans le menu Eklablog nommé Apparence pour cliquer sur Modifier le thème.

    Eklablog - Un fond animé au scroll

    En bas de la colonne de gauche, cliquez sur Ajouter du CSS.

    Eklablog - Un fond animé au scroll

    Dans la zone de droite, copiez-collez ce code :

    /* Image de fond */
    body{background-image:url('http://url-de-mon-image.jpg');

    Remplacez http://url-de-mon-image.jpg par votre propre url, puis cliquez sur le bouton Appliquer et Sauvegarder. (Il n'y a pas besoin d'autre règle, car le comportement par défaut de cette règle CSS répète le fond en mosaïque et le positionne en haut à gauche.)

    Ajouter le masque avec l'outil du thème

    Au tour de l'image du dessus maintenant : rendez-vous à nouveau dans le menu Eklablog Apparence puis Modifier le thème.

    Dans la colonne de gauche, cliquez sur Format du blog, puis sur Fond.

    Eklablog - Un fond animé au scroll

    Mettez en ligne votre image, puis cliquez sur Afficher/Masquer les paramètres étendus.
    Réglez l'image en mode de répétition mosaïque et en attachement fixe.

    Et voilà ! Si vous avez bien suivi, votre fond animé devrait fonctionner. yes

    Résultat

    Voici le résultat et une série d'autres exemples :

    Abeilles

    Fond : Masque :
    Eklablog - Un fond animé au scroll motif abeille
     

    Zig-zags

    Fond : Masque :
    Eklablog - Un fond animé au scroll Eklablog - Un fond animé au scroll
     

    Broderie

    Fond : Masque :
    Eklablog - Un fond animé au scroll Eklablog - Un fond animé au scroll
     

    En vous souhaitant la manipulation agréable.
    N'hésitez pas à poser vos questions en commentaire. wink2


    Tags Tags : , , , , , ,
  • Commentaires

    1
    Mardi 27 Février à 14:23

    Bonjour,

     

    Je 'ai jamais essayer de monter un site ou blog avec eklablog mais votre tuto m'encourage à le faire. Merci !

    En passant, je vous propose de consulter le: https://dago2web.com/packs/pack-developpeur-front-end-dedie/

     

    yes

    A bientôt !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :