ScrollingLettersAnimation/js/demo4.js at master · codrops/ScrollingLettersAnimation · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
 * demo1.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2018, Codrops
 * http://www.codrops.com
 */
{
    class Entry {
        constructor(el) {
            this.DOM = {el: el};
            this.DOM.image = this.DOM.el.querySelector('.content__img');
            this.DOM.title = {word: this.DOM.el.querySelector('.content__text')};
            charming(this.DOM.title.word);
            this.DOM.title.letters = Array.from(this.DOM.title.word.querySelectorAll('span'));
            this.DOM.title.letters.forEach(letter => letter.dataset.initial = letter.innerHTML);
            this.lettersTotal = this.DOM.title.letters.length;
            observer.observe(this.DOM.el);
        }
        enter(direction = 'down') {
            this.DOM.title.word.style.opacity = 1;

            this.DOM.title.letters.forEach((letter,pos) => {
                anime.remove(letter);
                let letterAnim = {
                    targets: letter,
                    duration: 500,
                    delay: () => pos*80,
                    easing: 'easeOutQuint',
                    opacity: {
                        value: [0,1],
                        duration: 400,
                        easing: 'linear'
                    }
                };
                if ( anime.random(0,1) > 0.5 ) {
                    letterAnim.translateX = [anime.random(0,1) > 0.5 ? -window.innerWidth :  window.innerWidth, 0];
                }
                else {
                    letterAnim.translateY = [anime.random(0,1) > 0.5 ? -window.innerHeight :  window.innerHeight, 0];
                }
                anime(letterAnim);
            });

            anime.remove(this.DOM.image);
            anime({
                targets: this.DOM.image,
                duration: 800,
                easing: 'easeOutQuad',
                rotate: () => direction === 'down' ? 5 : -5
            });
        }
        exit(direction = 'down') {
            this.DOM.title.letters.forEach((letter,pos) => {
                anime.remove(letter);
                let letterAnim = {
                    targets: letter,
                    duration: 500,
                    delay: () => pos*80,
                    easing: 'easeOutQuint',
                    opacity: {
                        value: 0,
                        duration: 200,
                        easing: 'linear'
                    }
                };
                if ( anime.random(0,1) > 0.5 ) {
                    letterAnim.translateX = [0,anime.random(0,1) > 0.5 ? -window.innerWidth :  window.innerWidth];
                }
                else {
                    letterAnim.translateY = [0,anime.random(0,1) > 0.5 ? -window.innerHeight :  window.innerHeight];
                }
                anime(letterAnim);
            });

            anime.remove(this.DOM.image);
            anime({
                targets: this.DOM.image,
                duration: 800,
                easing: 'easeOutQuad',
                rotate: 0
            });
        }
    }

    let observer;
    let current = -1;
    let allentries = [];
    const sections = Array.from(document.querySelectorAll('.content__section'));
    // Preload all the images in the page..
	imagesLoaded(document.querySelectorAll('.content__img'), () => {
        document.body.classList.remove('loading');
        if ('IntersectionObserver' in window) {
            document.body.classList.add('ioapi');

            observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if ( entry.intersectionRatio > 0.5 ) {
                        const newcurrent = sections.indexOf(entry.target);
                        if ( newcurrent === current ) return;
                        const direction = newcurrent > current;
                        if (current >= 0 ) {
                            allentries[current].exit(direction ? 'down' : 'up');
                        }
                        allentries[newcurrent].enter(direction ? 'down' : 'up');
                        current = newcurrent;
                    }
                });
            }, { threshold: 0.5 });

            sections.forEach(section => allentries.push(new Entry(section)));
        }
    });
}