Effet sur textes au scroll

Version imprimable

24/08/2019, 16h36
novis5

Effet sur textes au scroll

Bonjour,

Je cherche sur internet des effets sur les textes et images. Je m'explique, j'aimerai que lors du défilement, les images (ou textes) apparaissent de la droite ou de la gauche.

Auriez vous de bonnes adresses à me donner? pour avoir un point de départ.

Personnellement, j'avais trouvé cela https://codepen.io/MCarlson8198/pen/mmqGrg

Néanmoins le js présentait une erreur sur mon serveur de site. Donc je cherche quelque chose de similaire au niveau de l'effet avec un code différent.

Merci beaucoup

ps: si vous avez d'autres effets (animation) intéressants pour les tablettes n'hésitez pas à partager.

Novis
24/08/2019, 17h40
Invité
Bonjour,
- plugin WOWjs (démo)
25/08/2019, 11h29
novis5

Bonjour Jreaux62,
Merci pour votre réponse.
J'ai regardé le lien que vous m'avez transmis. j'ai testé différents codes, mais je dois avoué qu'il y a tellement de fichier que je suis un peu perdu!! J'avais déjà vu des fichiers sur github mais je ne parviens pas à savoir ce que je dois insérer ou non!
Et là au vue du nombre de fichier, je me tire les cheveux depuis hier...
Merci de bien vouloir m'aider
novis
25/08/2019, 13h32
Invité
Il suffit de cliquer sur le menu (en haut) :
- How to use?
- GitHub
J'ai mis aussi un lien vers une démo.
Il faut cliquer dessus,... et regarder le code.

Globalement, on ajoute des classes, et éventuellement des options :

Code:

<section class="wow slideInRight" data-wow-delay="2s"></section>

Il est dit qu'on trouve les noms des animations dans le fichier animate.css.
25/08/2019, 14h23
novis5

Merci pour les précisions.
Voilà le test que j'ai effectué sur codepen : https://codepen.io/noviscanvas/pen/yLBMVpN
Par contre j'aime bien comprendre les erreurs que je fais et là je suis sûr que s'en est truffé!!! J'ai essayé de balayer les fichiers dans github .
Merci de vos lumières
novis
25/08/2019, 15h48
Invité
Euhhh... Tu fais quoi, là ?... :koi:

1- Tu télécharges les fichiers depuis le github
bouton vert "clone or download" -> "Download ZIP"

2- Tu dézippes l'archive, et tu mets les fichiers dans un dossier "wow" (par exemple).

3- Ensuite, tu mets dans le <head> de ta page :

Code:

<link rel="stylesheet" href="wow/css/animate.css">

Et avant la balise </body> :
Code:

1 2 3 4 <script src="wow/js/wow.min.js"></script> <script> new WOW().init(); </script>
ET C'EST TOUT !
25/08/2019, 16h11
novis5

Ce que je ne comprends pas c'est quoi faire après avec le fichier car je passe par un hébergeur dans lequel je dois insérer des fichier css et js.
Je n'ai pas la possibilité de charger des dossiers du coup il n'y a pas de lien qui se fait...

C'est pour cela également que je passe par codepen pour tester car ce n'est pas évident quand c'est directement sur le site
25/08/2019, 16h22
Invité
Je ne comprends toujours pas ton problème...
Il faut télécharger via FTP le dossier sur le serveur.

Tu as un hébergement web, ... mais tu ne peux pas y télécharger des fichiers/dossiers ? :koi:

Je vois que tu es peintre...
Peux-tu nous dire :
- quel est ton niveau en informatique ?
- quel est l'hébergeur ?
- Et éventuellement l'URL de ton site ?
25/08/2019, 16h37
novis5

Effectivement je peux y créer des fichiers css et js mais des dossiers complets, je ne peux pas. Mon hébergeur est wifeo (c'est un hébergeur débutant mais j'enrichis mon site avec justement des css et js afin qu'il soit plus actuel interactif)
J'ai l'habitude de créer des effets avec du css, beaucoup moins avec du js.
Je passe beaucoup de temps à chercher etc... j'aime bien comprendre alors ça ne me dérange pas de tester et re tester des codes.
25/08/2019, 16h44
Invité
OK... wifeo... "un site gratuit pour les nuls..." (en informatique)

Dans ce cas, tu peux directement inclure les fichiers depuis le site de wowjs :
Code:

1 2 3 <link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css"> <script src="https://wowjs.uk/dist/wow.js"></script> <script>new WOW().init();</script>
Comme ça, pas besoin de télécharger quoi que ce soit.

Par contre, il faudra trouver le moyen d'ajouter les classe "wow" aux blocs concernés...
26/08/2019, 21h59
novis5

Bonsoir,
J'ai fait un autre test... bref... je me tire les cheveux...
En faisant des recherches, j'ai trouvé ce site très intéressant (https://www.megaptery.com/2013/03/te...xtes-css3.html). Et de mon coté, j'ai fait un test sur codepen
https://codepen.io/noviscanvas/pen/QWLpRMP

est ce que quelqu'un pourrait m'expliquer ce que je ne fais pas correctement?
Merci beaucoup
Novis