https://greek-ouzo.com/themes/custom/greekouzo_bootstrap_sass/js/reveal-shuffle-glitch/glitch.js?v=11.1.2

1(function($) {
2
3  /**
4   * Animates element text.
5   *
6   * @credits   @danieltamkin                   github.com/danieltamkin
7   *            Peer-programmed by @darrenplace github.com/darrenplace
8   * @version   1.0.0
9   * @return    {settings.done()}
10   */
11  $.fn.glitch = function(options) {
12    /**
13     * Itterate over each instance.
14     * @param  {Object}                key     Relative to the element assignment
15     * @param  {Object}                element The current Element assigned
16     * @return {[type]}                        [description]
17     */
18    return this.each(function(key, element) {
19      let settings = $.extend({
20        chars: '!<>-_\\/[]{}—=+*^?#________',
21        charTime: 10,
22        finalText: undefined,
23        done: function(){console.log('done!');}
24      }, options );
25      let dfd = $.Deferred();
26
27      /**
28       * Prevent any collisions with function context.
29       * @type {Object}
30       */
31      let that = '';
32      /**
33       * Allows us to target the element.
34       * @type {jQuery}
35       */
36      element = $(element);
37      /**
38       * Grab the elements original text.
39       * @type {String}
40       */
41      let originalText = element.text();
42      /**
43       * Full fledged class containing the glitch effect,
44       * Will contain other glitch effects. Where currently
45       * the only effect is "randomly" glitching each char.
46       *
47       * @return {function}
48       */
49      let TextScramble = (function(){
50        let that = {};
51        function TextScramble (elementRefrence,chars) {
52          if(chars === undefined){
53            that.chars = settings.chars;
54          }
55          that.element = elementRefrence;
56          that.originalText = settings.finalText || elementRefrence.text();
57          that.scrambledText = initalizeScramble();
58        }
59        /**
60         * Random Scramble
61         * @return {Array}                List of chars randomized.
62         */
63        function initalizeScramble(){
64          let scrambleSet = []
65          for (var i = 0; i < that.originalText.length; i++) {
66            scrambleSet.push(randomChar())
67          }
68          return scrambleSet;
69        }
70        /**
71         * Randomly return a char from the set of chars defined
72         * @return {String}                A char from that.chars
73         */
74        function randomChar() {
75          return that.chars[Math.floor(Math.random() * that.chars.length)];
76        }
77        /**
78         * Updates a specific character from a given string with a supplied
79         * char.
80         *
81         * @param {String}            str   The string we're updating.
82         * @param {Int}               index The point of which updating occurs.
83         * @param {String}            chr   The character we're replacing.
84         * @credit {@darrenplace}
85         */
86        function setCharAt(str,index,chr) {
87          if(index > str.length-1) return str;
88          return str.substr(0,index) + chr + str.substr(index+1);
89        }
90        /**
91         * Targets a specific char from that.originalText to glitch.
92         *
93         * @param  {Int}              index location in that.originalText
94         *                                  to which we will target.
95         * @return {Promise}          Resolves once the character has resolved
96         *                            it's originalText.
97         */
98        function animateChar(index){
99          let dfd = $.Deferred();
100          let timeDiff = Math.floor(Math.random() * 40) + 10;
101          let animateAmount = Math.floor(Math.random() * 2) + settings.charTime;
102
103          // TODO: @darrenplace would love if we converted this to a fps specifc
104          // algorythim
105
106          //
107          /**
108           * Animation effect served through setInterval.
109           * @resolve                 When the original char was set.
110           */
111          let intervalSignit = setInterval(function(){
112            if(animateAmount === 0){
113              clearInterval(intervalSignit);
114              dfd.resolve();
115              that.element.text(
116                setCharAt(
117                  that.element.text(),
118                  index,
119                  that.originalText.charAt(index)
120                )
121              );
122            }
123            else{
124              that.element.text(
125                setCharAt(
126                  that.element.text(),
127                  index,
128                  randomChar()
129                )
130              );
131              animateAmount--;
132            }
133          }, timeDiff);
134
135
136          return dfd.promise();
137        }
138        /**
139         * Obtains the randomly generated scrambledText.
140         *
141         * @scope  {global}
142         * @return {String}                joins the scrambledText array.
143         */
144        TextScramble.prototype.getScrambledText = function(){
145          return that.scrambledText.join("");
146        }
147        /**
148         * Executes the animation
149         * @resolve                         When the elements text is
150         *                                  originalText is set.
151         * @return {Promise}                Passes a promise for chaining.
152         */
153        TextScramble.prototype.animate = function(){
154          let dfd = $.Deferred();
155          let promiseChain = [];
156
157          /**
158           * Each character is animated on their own timeframe.
159           * A rough rendition of "randomly" animating the glitch effect.
160           * // TODO: Make this an effect
161           */
162          for (var i = 0; i < element.text().length; i++) {
163            promiseChain.push(animateChar(i));
164          }
165          Promise.all(promiseChain)
166            .then(function(){
167              dfd.resolve();
168            });
169          return dfd.promise();
170        }
171        return TextScramble;
172      })();
173      /**
174       * Initalize the effect with a reference of the elmeent passed.
175       * @type {TextScramble}
176       */
177      let effect = new TextScramble(element)
178      /**
179       * Change the elements text to a generally scrambled Text
180       */
181      element.text(effect.getScrambledText());
182      /**
183       * Animate the glitch effect
184       */
185      effect.animate()
186        .then(function(){
187          settings.done(element);
188        })
189
190    });
191  };
192})(jQuery);