Discussion :

[Vinzzzzzz]

Bonjour,

J'utilise Slick slider pour ma homepage ainsi que des animations on scroll sur le reste de la page.
J'utilise un trigger scroll pour que les animations visibles des l'affichage de la page s'active. Cela marche correctement pour le premier slide, mais pour les slides suivants, je suis obligé de scroller pour que l'animation se déclenche.
Je voudrais que pour chaque slide, l'animation sur le texte se repete.
Vous pouvez voir l'exemple ici : Lien

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
$(document).ready(function () {
 
"use strict";
 
	/*
	ANIMATIONS FUNCTIONS
	********************************/
	function loadAnimations(items) {
 
		var offset = $(window).scrollTop() + $(window).height();
 
		if (items.length == 0) {
			$(window).off('scroll', loadAnimations);
		}
 
		items.each(function(i) {
			var element = $(this),
				animationClass = element.attr("data-animation"),
				animationDelay = element.attr('data-animation-delay');
 
			element.css({
				'-webkit-animation-delay': animationDelay,
				'-moz-animation-delay': animationDelay,
				'animation-delay': animationDelay
			});
 
			if((element.offset().top + element.height() - 20) < offset) 
			{
				element.addClass('animated').addClass(animationClass);
 
			}
 
		});
 
	}  
 
// Every time the window is scrolled... 
	$(window).scroll(function () {
 
        loadAnimations($('.animate'));
	}).trigger('scroll');
 
 
    /*
    LOAD SLICK SLIDER
    ********************************/
 
    $('.home-slider').slick({
        autoplay: true,
        autoplaySpeed: 6000,
        speed: 250,
        pauseOnHover: false,
        infinite: true,
        arrows: false,
        dots: true,
        loop: true
    });
 
});

[Invité]

Bonjour,

Ces animations-là n'ont pas à être "activées/loadées" sur le scroll.

Il faut les activer (en CSS) sur le "slick-current" ou "slick-active" : ces 2 classes sont dynamiquement ajoutées à la slide "en cours".