Discussion :

[MaevaR]

Bonjour à toutes et à tous,

J'ai commencé à ajouter des scripts javascript récemment sur mes sites et j'ai encore quelques lacunes. En effet, j'ai un code qui utilise ScrollMonitor + Anime.js et qui est censé donner un effet reveal sur mes éléments lors du scroll comme suivant ce tutorial : https://tympanus.net/codrops/2016/12...eveal-effects/

Malheureusement, le code en question ne fonctionne que sur un seul élément. Je dois ensuite répéter ce code pour qu'il fonctionne sur mes autres éléments. L'élément en question est .item et j'aimerais que tous les éléments avec cette classe bénéficie de l'effet. Avez-vous une petite idée ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
		var scrollElemToWatch = document.querySelector('.item'),
			watcher = scrollMonitor.create(scrollElemToWatch, -300),
 
			rev_img = new RevealFx(scrollElemToWatch, {
				revealSettings : {
					bgcolor: 'var(--bleu)',
					direction: 'rl',
					onCover: function(contentEl, revealerEl) {
						contentEl.style.opacity = 1;
					}
				}
			}),
 
			rev_bloc = new RevealFx(document.querySelector('.item--content'), {
				revealSettings : {
					bgcolor: 'var(--vert)',
					direction: 'lr',
					delay: 0,
					onCover: function(contentEl, revealerEl) {
						contentEl.style.opacity = 1;
					}
				}
			});
 
			watcher.enterViewport(function() {
				rev_img.reveal();
				rev_bloc.reveal();
				watcher.destroy();
			});
 
		}
	})();

Un grand merci à vous et bonne journée.

[Watilin]

Est-ce que chacun des .item a sa propre barre de défilement ?
Si oui, utilise querySelectorAll et une boucle for. La merveilleuse for...of si tu t’en fous d’IE (support).

Si non, ce sera plus performant, à mon avis, d’observer une seule fois le scroll sur la page entière.

[MaevaR]

Merci d'avoir pris le temps de répondre Watilin.

Alors non, chaque .item n'a pas sa barre de défilement propre. Je souhaite mettre cet effet sur une page de transition qui possède l'intégralité des articles d'une catégorie. Le .item est donc un article. Il peut y en avoir jusqu'à 10 par pages.

[Invité]

Bonjour,

à ta place, je laisserais tomber ce plugin : trop de code à "bricoler" (surtout si tu n'y connais pas grand chose en JS).

On trouve d'autre scripts : "js reveal on scroll"


Celui-ci a l'air sympa (et très facile à mettre en place) :

• WOWjs (exemple)