https://www.aravis-vacances.com/js/jquery.textillate.js

1/*
2 * textillate.js
3 * http://jschr.github.com/textillate
4 * MIT licensed
5 *
6 * Copyright (C) 2012-2013 Jordan Schroter
7 */
8
9(function ($) {
10  "use strict"; 
11
12  function isInEffect (effect) {
13    return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
14  };
15
16  function isOutEffect (effect) {
17    return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
18  };
19
20  // custom get data api method
21  function getData (node) {
22    var attrs = node.attributes || []
23      , data = {};
24
25    if (!attrs.length) return data;
26
27    $.each(attrs, function (i, attr) {
28      if (/^data-in-*/.test(attr.nodeName)) {
29        data.in = data.in || {};
30        data.in[attr.nodeName.replace(/data-in-/, '')] = attr.nodeValue;
31      } else if (/^data-out-*/.test(attr.nodeName)) {
32        data.out = data.out || {};
33        data.out[attr.nodeName.replace(/data-out-/, '')] = attr.nodeValue;
34      } else if (/^data-*/.test(attr.nodeName)) {
35        data[attr.nodeName] = attr.nodeValue;
36      }
37    })
38
39    return data;
40  }
41
42  function shuffle (o) {
43      for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
44      return o;
45  }
46
47  function animate ($c, effect, cb) {
48    $c.addClass('animated ' + effect)
49      .css('visibility', 'visible')
50      .show();
51
52    $c.one('animationend webkitAnimationEnd oAnimationEnd', function () {
53        $c.removeClass('animated ' + effect);
54        cb && cb();
55    });
56  }
57
58  function animateChars ($chars, options, cb) {
59    var that = this
60      , count = $chars.length;
61
62    if (!count) {
63      cb && cb();
64      return;
65    } 
66
67    if (options.shuffle) $chars = shuffle($chars);
68    if (options.reverse) $chars = $chars.toArray().reverse();
69
70    $.each($chars, function (i, c) {
71      var $char = $(c);
72      
73      function complete () {
74        if (isInEffect(options.effect)) {
75          $char.css('visibility', 'visible');
76        } else if (isOutEffect(options.effect)) {
77          $char.css('visibility', 'hidden');
78        }
79        count -= 1;
80        if (!count && cb) cb();
81      }
82
83      var delay = options.sync ? options.delay : options.delay * i * options.delayScale;
84
85      $char.text() ? 
86        setTimeout(function () { animate($char, options.effect, complete) }, delay) :
87        complete();
88    });
89  };
90
91  var Textillate = function (element, options) {
92    var base = this
93      , $element = $(element);
94
95    base.init = function () {
96      base.$texts = $element.find(options.selector);
97      
98      if (!base.$texts.length) {
99        base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>');
100        $element.html(base.$texts);
101      }
102
103      base.$texts.hide();
104
105      base.$current = $('<span>')
106        .text(base.$texts.find(':first-child').html())
107        .prependTo($element);
108
109      if (isInEffect(options.effect)) {
110        base.$current.css('visibility', 'hidden');
111      } else if (isOutEffect(options.effect)) {
112        base.$current.css('visibility', 'visible');
113      }
114
115      base.setOptions(options);
116
117      setTimeout(function () {
118        base.options.autoStart && base.start();
119      }, base.options.initialDelay)
120    };
121
122    base.setOptions = function (options) {
123      base.options = options;
124    };
125
126    base.triggerEvent = function (name) {
127      var e = $.Event(name + '.tlt');
128      $element.trigger(e, base);
129      return e;
130    };
131
132    base.in = function (index, cb) {
133      index = index || 0;
134       
135      var $elem = base.$texts.find(':nth-child(' + (index + 1) + ')')
136        , options = $.extend({}, base.options, getData($elem))
137        , $chars;
138
139      $elem.addClass('current');
140
141      base.triggerEvent('inAnimationBegin');
142
143      base.$current
144        .text($elem.html())
145        .lettering('words');
146
147      base.$current.find('[class^="word"]')
148          .css({ 
149            'display': 'inline-block',
150            // fix for poor ios performance
151            '-webkit-transform': 'translate3d(0,0,0)',
152               '-moz-transform': 'translate3d(0,0,0)',
153                 '-o-transform': 'translate3d(0,0,0)',
154                    'transform': 'translate3d(0,0,0)'
155          })
156          .each(function () { $(this).lettering() });
157
158      $chars = base.$current
159        .find('[class^="char"]')
160        .css('display', 'inline-block');
161
162      if (isInEffect(options.in.effect)) {
163        $chars.css('visibility', 'hidden');
164      } else if (isOutEffect(options.in.effect)) {
165        $chars.css('visibility', 'visible');
166      }
167
168      base.currentIndex = index;
169
170      animateChars($chars, options.in, function () {
171        base.triggerEvent('inAnimationEnd');
172        if (options.in.callback) options.in.callback();
173        if (cb) cb(base);
174      });
175    };
176
177    base.out = function (cb) {
178      var $elem = base.$texts.find(':nth-child(' + (base.currentIndex + 1) + ')')
179        , $chars = base.$current.find('[class^="char"]')
180        , options = $.extend({}, base.options, getData($elem));
181
182      base.triggerEvent('outAnimationBegin');
183
184      animateChars($chars, options.out, function () {
185        $elem.removeClass('current');
186        base.triggerEvent('outAnimationEnd');
187        if (options.out.callback) options.out.callback();
188        if (cb) cb(base);
189      });
190    };
191
192    base.start = function (index) {
193      base.triggerEvent('start');
194
195      (function run (index) {
196        base.in(index, function () {
197          var length = base.$texts.children().length;
198
199          index += 1;
200          
201          if (!base.options.loop && index >= length) {
202            if (base.options.callback) base.options.callback();
203            base.triggerEvent('end');
204          } else {
205            index = index % length;
206
207            setTimeout(function () {
208              base.out(function () {
209                run(index)
210              });
211            }, base.options.minDisplayTime);
212          }
213        });
214      }(index || 0));
215    };
216
217    base.init();
218  }
219
220  $.fn.textillate = function (settings, args) {
221    return this.each(function () {
222      var $this = $(this)
223        , data = $this.data('textillate')
224        , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);
225
226      if (!data) { 
227        $this.data('textillate', (data = new Textillate(this, options)));
228      } else if (typeof settings == 'string') {
229        data[settings].apply(data, [].concat(args));
230      } else {
231        data.setOptions.call(data, options);
232      }
233    })
234  };
235  
236  $.fn.textillate.defaults = {
237    selector: '.texts',
238    loop: false,
239    minDisplayTime: 2000,
240    initialDelay: 0,
241    in: {
242      effect: 'fadeInLeftBig',
243      delayScale: 1.5,
244      delay: 50,
245      sync: false,
246      reverse: false,
247      shuffle: false,
248      callback: function () {}
249    },
250    out: {
251      effect: 'hinge',
252      delayScale: 1.5,
253      delay: 50,
254      sync: false,
255      reverse: false,
256      shuffle: false,
257      callback: function () {}
258    },
259    autoStart: true,
260    inEffects: [],
261    outEffects: [ 'hinge' ],
262    callback: function () {}
263  };
264
265}(jQuery));