-
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é estpattern
, 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 :
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, oucolor range
dans le menuSelect
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.
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 surModifier 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 boutonAppliquer 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
puisModifier le thème
.Dans la colonne de gauche, cliquez sur
Format du blog
, puis surFond
.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 :
Abeilles
Fond : Masque : Zig-zags
Fond : Masque : Broderie
Fond : Masque : En vous souhaitant la manipulation agréable.
N'hésitez pas à poser vos questions en commentaire.
Tags : ekalblog, graphisme, html, css, coding, blog, site
-
Commentaires
Zirai ilaç, tohum gübre ve tarımsal izmir peyzaj danışmanlık kısmında şirket kurucumuz Sayın A.S. Köksal, yaklaşık yirmi senelik deneyimiyle sektörün öncülerindendir.
Welcome to maximedturkey.com Maxi Medicine is a healthcare company that is specialized in medical tourism in Turkey, surgery and operations, esthetic surgery, hair transplantation.
Ajouter un commentaire
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/
A bientôt !