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 !

**novis5** · 25/08/2019, 16h11

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

Invité · 25/08/2019, 16h22

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 ?

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 ?

**novis5** · 25/08/2019, 16h37

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.

Invité · 25/08/2019, 16h44

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 :

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

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

**novis5** · 26/08/2019, 21h59

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

Effet sur textes au scroll

JavaScript

Discussions similaires

Partager

Partager