Effet Parallax en pur CSS sous Tiddlywiki


#1

Salut à tous,

Sujet plutôt orienté Web, mais je ne le mets pas dans la catégorie Tiddlyoueb car ça ne concerne pas directement cette instance de TW.

Donc, je souhaiterais pour le site http://natura-lien.fr que l’image de fond soit mouvante, se déplaçant moins vite que les Tiddlers eux même: c’est l’effet parallax. Mais je le veux très simple: juste un fond mouvant pour l’instant.

En fait, Il existe moulte tutoriels sur le net, mais aucun ne disant: “mets ça dans ce tiddler, puis modifie ce tiddler en mettant ça, puis mets ça dans un champs puis blablabla”.

Ainsi, en attendant d’avoir réussi, je lance le sujet, mais je suis sûr que @svink sait quels tiddlers toucher pour ça ! :smiley:


#2

Peut-être $:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment ?

J’essaie avec le tuto suivant: https://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript


#3

Là comme ça j’imagine que cela ne va pas être évident, puisque dans ton exemple, le contenu est juste masqué en CSS, alors que la nature de TW s’est de s’auto-reconstruire dynamiquement pour afficher les éléments en manipulant en permanence le DOM de la page.
Pour que ça fonctionne, je suppose qu’il faudrait afficher les 3 tiddlers dans la story river, puis d’en masquer deux comme le fait le tuto.


#4

OK, donc selon toi, l’exemple utilisé peut être remplacé par un plus adapté.

Dites-moi si je me trompe: à chaque chargement d’un tiddler ou d’une story complète, la story river change son paramètre height. Donc serait-il possible en CSS de forcer le déplacement de la background-image en % de la hauteur de la story river?


#5

En fait non, je pense que ce n’est pas possible avec mes connaissances en CSS :sweat_smile: