Eklablog - Un fond animé au scroll

Important : Cet article concerne l'ancienne interface visuelle d'Eklablog, et se trouve probablement être devenu obsolète.

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.

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 :

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 :

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 :

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.

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.

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

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.)

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.

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.

Résultat

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

Fond :	Masque :

Fond :	Masque :

Fond :	Masque :

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