[Slick] Slider animation de texte
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:
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
});
}); |
