Effet sur textes au scroll

**novis5** · 24/08/2019, 16h36

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

Invité · 24/08/2019, 17h40

Bonjour,

plugin WOWjs (démo)

**novis5** · 25/08/2019, 11h29

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

Invité · 25/08/2019, 13h32

Il suffit de cliquer sur le menu (en haut) :

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Il est dit qu'on trouve les noms des animations dans le fichier animate.css.

**novis5** · 25/08/2019, 14h23

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

Invité · 25/08/2019, 15h48

Euhhh... Tu fais quoi, là ?...

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et avant la balise </body> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script src="wow/js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

ET C'EST TOUT !

Effet sur textes au scroll

JavaScript

Vue hybride

Discussions similaires

Partager

Partager