https://mamounia.com/bundles/apiciuswebsite/modules/internal/scrollAnimations.js

1'use strict'
2
3/**
4 * ScrollAnimations
5 * @version 1.0.0
6 */
7class scrollAnimations {
8
9    /**
10     * ScrollAnimations constructor
11     * @param {String} className
12     */
13    constructor(className = '') {
14        // Ajoute la classe au body pour indiquer que le module est activé
15        document.body.classList.add('scrollAnimations');
16
17        // Classe à ajouter sur les éléments qui sont à animer
18        // this.className = className ?? 'animated';
19
20        // Initialise le tableau des cibles à animer
21        this.targets = [];
22    }
23
24    /**
25     * Ajout d'un type d'animation
26     *
27     * @param {string|array}  target  Liste des éléments à impacter dans l'effet
28     * @param {string}        margin  Margin entre le moment où l'élément rentre dans le viewport et où il doit s'animer
29     * @param {boolean}       oneTime Anime l'élément une seule fois si TRUE, sinon anime à chaque entée/sortie du viewport
30     */
31    add(target, margin, oneTime) {
32        // Initialise les options de l'observer
33        var observerOptions = {rootMargin: margin};
34
35        // Si le paramètre est omis on force sa valeur à true
36        oneTime = (typeof oneTime === 'undefined') ? true : oneTime;
37
38        // Si la cible est un tableau on concatène en chaîne de caractère
39        // if (Array.isArray(target)) {
40        //     target = target.join(',');
41        // }
42
43        // Récupère les elements à traiter dans le wow
44        let targets = document.querySelectorAll(target);
45
46        targets.forEach(elmt => {
47            this.targets.push(elmt);
48        });
49
50        // Lance l'observer pour analyser si l'élément rentre dans le viewport
51        this.observer = new IntersectionObserver((entries, observer) => {
52            entries.forEach(entry => {
53
54                // Cas où l'élément est dans le viewport
55                if (entry.isIntersecting) {
56                    entry.target.classList.add('animated');
57                }
58
59                // Cas où l'élément sort dans le viewport si on veut retirer la classe
60                else if (!oneTime) {
61                    entry.target.classList.remove('animated');
62                }
63
64            });
65        }, observerOptions);
66    }
67
68    /**
69     * Gestion des vidéos qui se coupent au scroll
70     *
71     * @param {string|array}  target  Liste des vidéos à impacter
72     * @param {string}        margin  Margin entre le moment où l'élément rentre dans le viewport et où il doit s'animer
73     */
74    videoScrollPause(target, margin) {
75
76        // Initialise les options de l'observer
77        var observerOptions = {rootMargin: margin},
78            targets         = document.querySelectorAll(target);
79
80        targets.forEach(elmt => {
81            this.targets.push(elmt);
82        });
83
84        // Lance l'observer pour analyser si l'élément rentre dans le viewport
85        this.observer = new IntersectionObserver((entries, observer) => {
86            entries.forEach(entry => {
87
88                // Cas où la vidéo n'est plus dans le viewport
89                if (!entry.isIntersecting) {
90                    entry.target.pause();
91                }
92
93            });
94        }, observerOptions);
95    }
96
97    /**
98     * Déclenche les animations pré-chargées avec la méthode add()
99     */
100    run() {
101        // Pour chaque élément cible, on lance l'observer
102        this.targets.forEach(element => {
103            this.observer.observe(element);
104        });
105    }
106}