https://bandirma.edu.tr/Content/v2/js/text-type.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    function initHeadline() {
20        //insert <i> element for each letter of a changing word
21        singleLetters($('.cd-headline.letters').find('b'));
22        //initialise headline animation
23        animateHeadline($('.cd-headline'));
24    }
25
26    function singleLetters($words) {
27        $words.each(function () {
28            var word = $(this),
29                letters = word.text().split(''),
30                selected = word.hasClass('is-visible');
31            for (i in letters) {
32                if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
33                letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
34            }
35            var newLetters = letters.join('');
36            word.html(newLetters).css('opacity', 1);
37        });
38    }
39
40    function animateHeadline($headlines) {
41        var duration = animationDelay;
42        $headlines.each(function () {
43            var headline = $(this);
44
45            if (headline.hasClass('loading-bar')) {
46                duration = barAnimationDelay;
47                setTimeout(function () {
48                    headline.find('.cd-words-wrapper').addClass('is-loading')
49                }, barWaiting);
50            } else if (headline.hasClass('clip')) {
51                var spanWrapper = headline.find('.cd-words-wrapper'),
52                    newWidth = spanWrapper.width() + 10
53                spanWrapper.css('width', newWidth);
54            } else if (!headline.hasClass('type')) {
55                //assign to .cd-words-wrapper the width of its longest word
56                var words = headline.find('.cd-words-wrapper b'),
57                    width = 0;
58                words.each(function () {
59                    var wordWidth = $(this).width();
60                    if (wordWidth > width) width = wordWidth;
61                });
62                headline.find('.cd-words-wrapper').css('width', width);
63            };
64
65            //trigger animation
66            setTimeout(function () {
67                hideWord(headline.find('.is-visible').eq(0))
68            }, duration);
69        });
70    }
71
72    function hideWord($word) {
73        var nextWord = takeNext($word);
74
75        if ($word.parents('.cd-headline').hasClass('type')) {
76            var parentSpan = $word.parent('.cd-words-wrapper');
77            parentSpan.addClass('selected').removeClass('waiting');
78            setTimeout(function () {
79                parentSpan.removeClass('selected');
80                $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
81            }, selectionDuration);
82            setTimeout(function () {
83                showWord(nextWord, typeLettersDelay)
84            }, typeAnimationDelay);
85
86        } else if ($word.parents('.cd-headline').hasClass('letters')) {
87            var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
88            hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
89            showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
90
91        } else if ($word.parents('.cd-headline').hasClass('clip')) {
92            $word.parents('.cd-words-wrapper').animate({
93                width: '2px'
94            }, 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({
124                'width': $word.width() + 10
125            }, revealDuration, function () {
126                setTimeout(function () {
127                    hideWord($word)
128                }, revealAnimationDelay);
129            });
130        }
131    }
132
133    function hideLetter($letter, $word, $bool, $duration) {
134        $letter.removeClass('in').addClass('out');
135
136        if (!$letter.is(':last-child')) {
137            setTimeout(function () {
138                hideLetter($letter.next(), $word, $bool, $duration);
139            }, $duration);
140        } else if ($bool) {
141            setTimeout(function () {
142                hideWord(takeNext($word))
143            }, animationDelay);
144        }
145
146        if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
147            var nextWord = takeNext($word);
148            switchWord($word, nextWord);
149        }
150    }
151
152    function showLetter($letter, $word, $bool, $duration) {
153        $letter.addClass('in').removeClass('out');
154
155        if (!$letter.is(':last-child')) {
156            setTimeout(function () {
157                showLetter($letter.next(), $word, $bool, $duration);
158            }, $duration);
159        } else {
160            if ($word.parents('.cd-headline').hasClass('type')) {
161                setTimeout(function () {
162                    $word.parents('.cd-words-wrapper').addClass('waiting');
163                }, 200);
164            }
165            if (!$bool) {
166                setTimeout(function () {
167                    hideWord($word)
168                }, animationDelay)
169            }
170        }
171    }
172
173    function takeNext($word) {
174        return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
175    }
176
177    function takePrev($word) {
178        return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(

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