https://coai.com/frontend/theme4/assets/js/typer.js

1jQuery(document).ready(function ($) {
2    //set animation timing
3    var animationDelay = 2500,
4        //loading bar effect
5        barAnimationDelay = 3800,
6        barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
7        //letters effect
8        lettersDelay = 50,
9        //type effect
10        typeLettersDelay = 150,
11        selectionDuration = 500,
12        typeAnimationDelay = selectionDuration + 800,
13        //clip effect
14        revealDuration = 600,
15        revealAnimationDelay = 1500;
16
17    initHeadline();
18
19
20    function initHeadline() {
21        //insert <i> element for each letter of a changing word
22        singleLetters($('.cd-headline.letters').find('b'));
23        //initialise headline animation
24        animateHeadline($('.cd-headline'));
25    }
26
27    function singleLetters($words) {
28        $words.each(function () {
29            var word = $(this),
30                letters = word.text().split(''),
31                selected = word.hasClass('is-visible');
32            for (i in letters) {
33                if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
34                letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
35            }
36            var newLetters = letters.join('');
37            word.html(newLetters).css('opacity', 1);
38        });
39    }
40
41    function animateHeadline($headlines) {
42        var duration = animationDelay;
43        $headlines.each(function () {
44            var headline = $(this);
45
46            if (headline.hasClass('loading-bar')) {
47                duration = barAnimationDelay;
48                setTimeout(function () {
49                    headline.find('.cd-words-wrapper').addClass('is-loading')
50                }, barWaiting);
51            } else if (headline.hasClass('clip')) {
52                var spanWrapper = headline.find('.cd-words-wrapper'),
53                    newWidth = spanWrapper.width() + 10
54                spanWrapper.css('width', newWidth);
55            } else if (!headline.hasClass('type')) {
56                //assign to .cd-words-wrapper the width of its longest word
57                var words = headline.find('.cd-words-wrapper b'),
58                    width = 0;
59                words.each(function () {
60                    var wordWidth = $(this).width();
61                    if (wordWidth > width) width = wordWidth;
62                });
63                headline.find('.cd-words-wrapper').css('width', width);
64            }
65            ;
66
67            //trigger animation
68            setTimeout(function () {
69                hideWord(headline.find('.is-visible').eq(0))
70            }, duration);
71        });
72    }
73
74    function hideWord($word) {
75        var nextWord = takeNext($word);
76
77        if ($word.parents('.cd-headline').hasClass('type')) {
78            var parentSpan = $word.parent('.cd-words-wrapper');
79            parentSpan.addClass('selected').removeClass('waiting');
80            setTimeout(function () {
81                parentSpan.removeClass('selected');
82                $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
83            }, selectionDuration);
84            setTimeout(function () {
85                showWord(nextWord, typeLettersDelay)
86            }, typeAnimationDelay);
87
88        } else if ($word.parents('.cd-headline').hasClass('letters')) {
89            var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
90            hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
91            showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
92
93        } else if ($word.parents('.cd-headline').hasClass('clip')) {
94            $word.parents('.cd-words-wrapper').animate({width: '2px'}, revealDuration, function () {
95                switchWord($word, nextWord);
96                showWord(nextWord);
97            });
98
99        } else if ($word.parents('.cd-headline').hasClass('loading-bar')) {
100            $word.parents('.cd-words-wrapper').removeClass('is-loading');
101            switchWord($word, nextWord);
102            setTimeout(function () {
103                hideWord(nextWord)
104            }, barAnimationDelay);
105            setTimeout(function () {
106                $word.parents('.cd-words-wrapper').addClass('is-loading')
107            }, barWaiting);
108
109        } else {
110            switchWord($word, nextWord);
111            setTimeout(function () {
112                hideWord(nextWord)
113            }, animationDelay);
114        }
115    }
116
117    function showWord($word, $duration) {
118        if ($word.parents('.cd-headline').hasClass('type')) {
119            showLetter($word.find('i').eq(0), $word, false, $duration);
120            $word.addClass('is-visible').removeClass('is-hidden');
121
122        } else if ($word.parents('.cd-headline').hasClass('clip')) {
123            $word.parents('.cd-words-wrapper').animate({'width': $word.width() + 10}, revealDuration, function () {
124                setTimeout(function () {
125                    hideWord($word)
126                }, revealAnimationDelay);
127            });
128        }
129    }
130
131    function hideLetter($letter, $word, $bool, $duration) {
132        $letter.removeClass('in').addClass('out');
133
134        if (!$letter.is(':last-child')) {
135            setTimeout(function () {
136                hideLetter($letter.next(), $word, $bool, $duration);
137            }, $duration);
138        } else if ($bool) {
139            setTimeout(function () {
140                hideWord(takeNext($word))
141            }, animationDelay);
142        }
143
144        if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
145            var nextWord = takeNext($word);
146            switchWord($word, nextWord);
147        }
148    }
149
150    function showLetter($letter, $word, $bool, $duration) {
151        $letter.addClass('in').removeClass('out');
152
153        if (!$letter.is(':last-child')) {
154            setTimeout(function () {
155                showLetter($letter.next(), $word, $bool, $duration);
156            }, $duration);
157        } else {
158            if ($word.parents('.cd-headline').hasClass('type')) {
159                setTimeout(function () {
160                    $word.parents('.cd-words-wrapper').addClass('waiting');
161                }, 200);
162            }
163            if (!$bool) {
164                setTimeout(function () {
165                    hideWord($word)
166                }, animationDelay)
167            }
168        }
169    }
170
171    function takeNext($word) {
172        return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
173    }
174
175    function takePrev($word) {
176        return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(

176);
177    }
178
179    function switchWord($oldWord, $newWord) {
180        $oldWord.removeClass('is-visible').addClass('is-hidden');
181        $newWord.removeClass('is-hidden').addClass('is-visible');
182    }
183});