Répéter un effet sur tous les éléments
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:
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.
