https://www.milifestylemarketing.com/js/banner_script.js

1/**
2 * Velocity Effects
3 *
4 * First, A few Registered effects for velocity's ui kit.
5 * Actual slider stuff below
6 */
7
8var scaleDownAmnt = 0.7;
9var boxShadowAmnt = '40px';
10
11$.Velocity.RegisterEffect("translateUp", {
12  defaultDuration: 1,
13  calls: [
14    [{
15      translateY: '-100%'
16    }, 1]
17  ]
18});
19$.Velocity.RegisterEffect("translateDown", {
20  defaultDuration: 1,
21  calls: [
22    [{
23      translateY: '100%'
24    }, 1]
25  ]
26});
27$.Velocity.RegisterEffect("translateNone", {
28  defaultDuration: 1,
29  calls: [
30    [{
31      translateY: '0',
32      opacity: '1',
33      scale: '1',
34 
35    }, 1]
36  ]
37});
38//scale down
39$.Velocity.RegisterEffect("scaleDown", {
40  defaultDuration: 1,
41  calls: [
42    [{
43      opacity: '0',
44      scale: '0.7',
45 
46    }, 1]
47  ]
48});
49
50//gallery
51$.Velocity.RegisterEffect("scaleDown.moveUp", {
52  defaultDuration: 1,
53  calls: [
54    [{
55      translateY: '0%',
56      scale: scaleDownAmnt,
57 
58    }, 0.20],
59    [{
60      translateY: '-100%'
61    }, 0.60],
62    [{
63      translateY: '-100%',
64      scale: '1',
65      // boxShadowBlur: '0'
66    }, 0.20]
67  ]
68});
69$.Velocity.RegisterEffect("scaleDown.moveUp.scroll", {
70  defaultDuration: 1,
71  calls: [
72    [{
73      translateY: '-100%',
74      scale: scaleDownAmnt,
75 
76    }, 0.60],
77    [{
78      translateY: '-100%',
79      scale: '1',
80      // boxShadowBlur: '0'
81    }, 0.40]
82  ]
83});
84$.Velocity.RegisterEffect("scaleUp.moveUp", {
85  defaultDuration: 1,
86  calls: [
87    [{
88      translateY: '90%',
89      scale: scaleDownAmnt,
90      // boxShadowBlur: boxShadowAmnt     
91    }, 0.20],
92    [{
93      translateY: '0%'
94    }, 0.60],
95    [{
96      translateY: '0%',
97      scale: '1',
98      // boxShadowBlur: '0'
99    }, 0.20]
100  ]
101});
102$.Velocity.RegisterEffect("scaleUp.moveUp.scroll", {
103  defaultDuration: 1,
104  calls: [
105    [{
106      translateY: '0%',
107      scale: scaleDownAmnt,
108      // boxShadowBlur: boxShadowAmnt
109    }, 0.60],
110    [{
111      translateY: '0%',
112      scale: '1',
113      // boxShadowBlur: '0'
114    }, 0.40]
115  ]
116});
117$.Velocity.RegisterEffect("scaleDown.moveDown", {
118  defaultDuration: 1,
119  calls: [
120    [{
121      translateY: '0%',
122      scale: scaleDownAmnt,
123      // boxShadowBlur: boxShadowAmnt
124    }, 0.20],
125    [{
126      translateY: '100%'
127    }, 0.60],
128    [{
129      translateY: '100%',
130      scale: '1',
131      // boxShadowBlur: '0'
132    }, 0.20]
133  ]
134});
135$.Velocity.RegisterEffect("scaleDown.moveDown.scroll", {
136  defaultDuration: 1,
137  calls: [
138    [{
139
140    }, 0.60],
141    [{
142      translateY: '100%',
143      scale: '1',
144      // boxShadowBlur: '0'
145    }, 0.40]
146  ]
147});
148$.Velocity.RegisterEffect("scaleUp.moveDown", {
149  defaultDuration: 1,
150  calls: [
151    [{
152      translateY: '-90%',
153      scale: scaleDownAmnt,
154      // boxShadowBlur: boxShadowAmnt
155    }, 0.20],
156    [{
157      translateY: '0%'
158    }, 0.60],
159    [{
160      translateY: '0%',
161      scale: '1',
162      // boxShadowBlur: '0'
163    }, 0.20]
164  ]
165});
166
167
168
169/**
170 * Velo Slider
171 * A Custom Slider using Velocity and Velocity UI effects
172 */
173
174var VeloSlider = (function() {
175
176  /**
177   * Global Settings 
178   */
179  var settings = {
180    veloInit: $('.velo-slides').data('velo-slider'),
181    $veloSlide: $('.velo-slide'),
182    veloSlideBg: '.velo-slide__bg',
183    navPrev:  $('.velo-slides-nav').find('a.js-velo-slides-prev'),
184    navNext:  $('.velo-slides-nav').find('a.js-velo-slides-next'),
185    veloBtn:   $('.velo-slide__btn'),
186    delta: 0,
187    scrollThreshold: 7,
188    currentSlide: 1,
189    animating: false,
190    animationDuration: 2000
191  };
192
193
194  // Flags
195  var delta = 0,
196      animating = false;
197
198  return {
199   
200      /**
201       * Init 
202       */
203      init: function() {
204        this.bind();
205      },
206    
207    /**
208     * Bind our click, scroll, key events
209     */
210    bind: function(){
211 
212      //  Add active to first slide to set it off
213      settings.$veloSlide.first().addClass('is-active');
214
215      //  Init with a data attribute, 
216      //  Binding the animation to scroll, arrows, keys
217      if (settings.veloInit == 'on') {
218        VeloSlider.initScrollJack();
219        $(window).on('DOMMouseScroll mousewheel', VeloSlider.scrollJacking);
220      }
221
222      // Arrow / Click Nav
223      settings.navPrev.on('click', VeloSlider.prevSlide);
224      settings.navNext.on('click', VeloSlider.nextSlide);
225    
226      // Key Nav
227      $(document).on('keydown', function(e) {
228        var keyNext = (e.which == 39 || e.which == 40),

229            keyPrev = (e.which == 37 || e.which == 38);
230
231        if (keyNext && !settings.navNext.hasClass('inactive')) {
232          e.preventDefault();
233          VeloSlider.nextSlide();
234
235        } else if (keyPrev && (!settings.navPrev.hasClass('inactive'))) {
236          e.preventDefault();
237          VeloSlider.prevSlide();
238        }
239      });
240      
241      // // Swipes
242      // $(window).swipe(function( direction, offset ) {
243      //   //if (offset < 100) { return; }
244      //   if (direction == "up") { 
245      //     VeloSlider.prevSlide(); 
246      //     console.log('swipe up');
247
248      //   }
249      //   if (direction == "down") { VeloSlider.nextSlide(); } 
250      // });
251    
252      //set navigation arrows visibility
253      VeloSlider.checkNavigation();
254
255      // Call Button Hover animation
256      VeloSlider.hoverAnimation();
257     
258    },
259
260    /**
261     * Hover Animation
262     * Adds 'is-hovering' class to the current slide
263     * when hovering over the button.
264     */
265    hoverAnimation: function(){
266      settings.veloBtn.hover(function (){
267        $(this).closest(settings.$veloSlide).toggleClass('is-hovering');
268      });
269    },
270
271    /** 
272     * Set Animation
273     * Defines the animation sequence, calling our registered velocity effects
274     * @see js/components/_velocity-effects.js
275     */
276    setAnimation: function(midStep, direction) {
277      
278      // Vars for our velocity effects
279      var animationVisible = 'translateNone',
280          animationTop = 'translateUp',
281          animationBottom = 'translateDown',
282          easing = 'ease',
283          animDuration = settings.animationDuration;
284
285      // Middle Step
286      if (midStep) {
287        animationVisible = 'scaleUp.moveUp.scroll';
288        animationTop = 'scaleDown.moveUp.scroll';
289        animationBottom = 'scaleDown.moveDown.scroll';
290      
291      } else {
292        animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
293        animationTop = 'scaleDown.moveUp';
294        animationBottom = 'scaleDown.moveDown';
295      }
296
297      return [animationVisible, animationTop, animationBottom, animDuration, easing];
298    },
299
300    /** 
301     * Init Scroll Jaclk
302     */
303    initScrollJack: function() {
304
305      var visibleSlide = settings.$veloSlide.filter('.is-active'),
306          topSection = visibleSlide.prevAll(settings.$veloSlide),
307          bottomSection = visibleSlide.nextAll(settings.$veloSlide),
308          animationParams = VeloSlider.setAnimation(false),
309          animationVisible = animationParams[0],
310          animationTop = animationParams[1],
311          animationBottom = animationParams[2];
312          console.log(animationParams);
313          console.log(animationParams[4]);
314
315      visibleSlide.children('div').velocity(animationVisible, 1, function() {
316        visibleSlide.css('opacity', 1);
317        topSection.css('opacity', 1);
318        bottomSection.css('opacity', 1);
319      });
320
321      topSection.children('div').velocity(animationTop, 0);
322      bottomSection.children('div').velocity(animationBottom, 0);
323    },
324
325    /**
326     * Scroll Jack
327     * On Mouse Scroll
328     */
329    scrollJacking: function(e) {
330      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
331        delta--;
332        (Math.abs(delta) >= settings.scrollThreshold) && VeloSlider.prevSlide();
333      } else {
334        delta++;
335        (delta >= settings.scrollThreshold) && VeloSlider.nextSlide();
336      }
337      return false;
338    },
339
340    /**
341     * Previous Slide
342     */
343    prevSlide: function(e) {
344      //go to previous section
345      typeof e !== 'undefined' && e.preventDefault();
346      
347      var visibleSlide = settings.$veloSlide.filter('.is-active'),
348          animationParams = VeloSlider.setAnimation(midStep, 'prev'),
349          midStep = false;
350      
351      visibleSlide = midStep ? visibleSlide.next(settings.$veloSlide) : visibleSlide;
352
353      console.log(midStep);
354
355      if (!animating && !visibleSlide.is(":first-child")) {
356        animating = true;
357        
358        visibleSlide
359          .removeClass('is-active')
360          .children(settings.veloSlideBg)
361          .velocity(animationParams[2], animationParams[3], animationParams[4])
362          .end()

363          .prev(settings.$veloSlide)
364          .addClass('is-active')
365          .children(settings.veloSlideBg)
366          .velocity(animationParams[0], animationParams[3], animationParams[4], function() {
367            animating = false;
368          });
369        currentSlide = settings.currentSlide - 1;
370      }
371      VeloSlider.resetScroll();
372    },
373
374
375    /** 
376     * Next Slide
377     */
378    nextSlide: function(e) {
379      
380      //go to next section
381      typeof e !== 'undefined' && e.preventDefault();
382      
383      var visibleSlide = settings.$veloSlide.filter('.is-active'),
384          animationParams = VeloSlider.setAnimation(midStep, 'next'),
385          midStep = false;
386
387      if (!animating && !visibleSlide.is(":last-of-type")) {
388        animating = true;
389
390        visibleSlide.removeClass('is-active')
391          .children(settings.veloSlideBg)
392          .velocity(animationParams[1], animationParams[3])
393          .end()
394          .next(settings.$veloSlide)
395          .addClass('is-active')
396          .children(settings.veloSlideBg)
397          .velocity(animationParams[0], animationParams[3], function() {
398            animating = false;
399        });
400        currentSlide = settings.currentSlide + 1;
401      }
402      VeloSlider.resetScroll();
403    },
404
405    /**
406     * Reset SCroll
407     */
408    resetScroll: function() {
409      delta = 0;
410      VeloSlider.checkNavigation();
411    },
412
413    /**
414     * Check Nav
415     * Adds / hides nav based on first/last slide
416     * @todo - loop slides, without cloning if possible
417     */
418    checkNavigation: function() {
419      //update navigation arrows visibility
420      (settings.$veloSlide.filter('.is-active').is(':first-of-type')) ? settings.navPrev.addClass('inactive'): settings.navPrev.removeClass('inactive');
421      (settings.$veloSlide.filter('.is-active').is(':last-of-type')) ? settings.navNext.addClass('inactive'): settings.navNext.removeClass('inactive');
422
423    },
424  };
425})();
426
427// INIT
428VeloSlider.init();