Advertisement
artemsemkin

Untitled

Oct 5th, 2020
981
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var SliderHalfScreen = function ($slider) {
  2.  
  3.   if (!$slider.length) {
  4.     return;
  5.   }
  6.  
  7.   var
  8.     $heading = $slider.find('h2'),
  9.     $description = $slider.find('p'),
  10.     $link = $slider.find('.slider-halfscreen__wrapper-link'),
  11.     tl = new TimelineMax(),
  12.     $sliderImg = $slider.find('.js-slider-halfscreen__images'),
  13.     $sliderContent = $slider.find('.js-slider-halfscreen__content'),
  14.     overlapFactor = $sliderImg.data('overlap-factor') || 0;
  15.  
  16.   createSliders();
  17.   hoverLinks();
  18.  
  19.   function createSliders() {
  20.  
  21.     var sliderImg = new Swiper($sliderImg, {
  22.       autoplay: {
  23.         enabled: $sliderImg.data('autoplay-enabled') || false,
  24.         delay: $sliderImg.data('autoplay-delay') || 6000,
  25.         disableOnInteraction: true
  26.       },
  27.       direction: 'vertical',
  28.       preloadImages: true,
  29.       lazy: {
  30.         loadPrevNext: true,
  31.         loadOnTransitionStart: true
  32.       },
  33.       speed: $sliderImg.data('speed') || 1200,
  34.       simulateTouch: false,
  35.       allowTouchMove: true,
  36.       watchSlidesProgress: true,
  37.       on: {
  38.         progress: function () {
  39.           var swiper = this;
  40.           for (var i = 0; i < swiper.slides.length; i++) {
  41.  
  42.             var slideProgress = swiper.slides[i].progress,
  43.               innerOffset = swiper.width * overlapFactor,
  44.               innerTranslate = slideProgress * innerOffset;
  45.  
  46.             try {
  47.               TweenMax.set(swiper.slides[i].querySelector('.slider-halfscreen__bg'), {
  48.                 y: innerTranslate + 'px',
  49.                 transition: swiper.params.speed + 'ms',
  50.                 rotationZ: 0.01,
  51.                 force3D: true
  52.               });
  53.             } catch (error) {
  54.  
  55.             }
  56.  
  57.           }
  58.         },
  59.         touchStart: function () {
  60.           var swiper = this;
  61.           for (var i = 0; i < swiper.slides.length; i++) {
  62.             try {
  63.               TweenMax.set(swiper.slides[i].querySelector('.slider-halfscreen__bg'), {
  64.                 transition: '',
  65.                 rotationZ: 0.01,
  66.                 force3D: true
  67.               });
  68.             } catch (error) {
  69.  
  70.             }
  71.  
  72.           }
  73.         },
  74.       }
  75.     });
  76.  
  77.     var sliderContent = new Swiper($sliderContent, {
  78.       simulateTouch: false,
  79.       direction: 'vertical',
  80.       effect: 'fade',
  81.       fadeEffect: {
  82.         crossFade: true
  83.       },
  84.       mousewheel: {
  85.         eventsTarged: '.page-wrapper',
  86.         releaseOnEdges: true,
  87.       },
  88.       keyboard: {
  89.         enabled: true
  90.       },
  91.       navigation: {
  92.         nextEl: '.js-slider-halfscreen__next',
  93.         prevEl: '.js-slider-halfscreen__prev',
  94.       },
  95.       speed: $sliderImg.data('speed') || 1200,
  96.       allowTouchMove: true,
  97.       breakpoints: {
  98.         992: {
  99.           autoHeight: true
  100.         }
  101.       }
  102.     });
  103.  
  104.     sliderContent.update();
  105.  
  106.     sliderContent.on('slideChange', () => {
  107.  
  108.       if (sliderContent.realIndex > sliderContent.previousIndex) {
  109.         slideChangeTransition('next');
  110.       }
  111.  
  112.       if (sliderContent.realIndex < sliderContent.previousIndex) {
  113.         slideChangeTransition('prev');
  114.       }
  115.  
  116.     });
  117.  
  118.     function slideChangeTransition(direction = 'next') {
  119.  
  120.       var
  121.         $activeSlide = $(sliderContent.slides[sliderContent.realIndex]),
  122.         $activeHeading = $activeSlide.find($heading),
  123.         $activeLink = $activeSlide.find($link),
  124.         $activeDescription = $activeSlide.find($description);
  125.  
  126.       tl.clear();
  127.  
  128.       $heading.each(function () {
  129.         tl
  130.           .add(hideWords($(this), 0.3, 0.02, direction === 'next' ? '50px' : '-50px', direction === 'next' ? true : false), '0')
  131.           .add(hideWords($heading, '0', '0', direction === 'next' ? '-50px' : '50px'));
  132.       });
  133.  
  134.       $description.each(function () {
  135.         tl.add(hideLines($(this), 0.6, 0.01, '100%', true), '0');
  136.       });
  137.  
  138.       $link.each(function () {
  139.         tl.to($(this), 0.6, {
  140.           y: '15px',
  141.           autoAlpha: 0
  142.         }, '0');
  143.       });
  144.  
  145.       tl
  146.         .add(animateWords($activeHeading, 1.2, 0.02, direction === 'next' ? true : false))
  147.         .add(animateLines($activeDescription, 1.2, 0.01, direction === 'next' ? true : false), '-=1.2')
  148.         .to($activeLink, 0.6, {
  149.           y: '0px',
  150.           autoAlpha: 1
  151.         }, '-=1.2');
  152.  
  153.     }
  154.  
  155.     sliderImg.controller.control = sliderContent;
  156.     sliderContent.controller.control = sliderImg;
  157.  
  158.     /**
  159.      * Overlay Change
  160.      */
  161.  
  162.     const
  163.       $overlay = $slider.find('.slider-halfscreen__overlay'),
  164.       colors = [
  165.         'linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%)', // slide 1
  166.         'linear-gradient(90deg, rgba(0,255,0,0) 0%, rgba(0,255,0,1) 100%)', // slide 2
  167.         'linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%)', // slide 3
  168.       ];
  169.  
  170.     // initial background overlay set for the 1st slide
  171.     TweenMax.set($overlay, {
  172.       background: colors[0],
  173.     });
  174.  
  175.     // slider change event
  176.     sliderImg.on('slideChange', function() {
  177.       const currentSlide = this.realIndex; // current slide index
  178.  
  179.       // if the color for the current slide exists in array
  180.       if (typeof colors[currentSlide] !== 'undefined') {
  181.         TweenMax.to($overlay, 1.2, {
  182.           background: colors[currentSlide],
  183.           overwrite: 'all'
  184.         });
  185.       }
  186.     });
  187.  
  188.     /**
  189.      *
  190.      */
  191.  
  192.   }
  193.  
  194.   function hoverLinks() {
  195.  
  196.     $document
  197.       .on('mouseenter touchstart', '.slider-halfscreen__link', function () {
  198.  
  199.         var $targetBackground = $sliderImg.find('.swiper-slide-active .slider-halfscreen__images-slide-inner'),
  200.           $linkLine = $sliderContent.find('.swiper-slide-active .slider-halfscreen__link-line');
  201.  
  202.         if (!$targetBackground.length) {
  203.           return;
  204.         }
  205.  
  206.         TweenMax.to($targetBackground, 0.6, {
  207.           scale: 1.05,
  208.           ease: Expo.easeInOut
  209.         });
  210.  
  211.         TweenMax.to($linkLine, 0.6, {
  212.           width: '70px',
  213.           ease: Expo.easeInOut
  214.         });
  215.  
  216.       })
  217.       .on('mouseleave touchend', '.slider-halfscreen__link', function () {
  218.  
  219.         var $targetBackground = $sliderImg.find('.swiper-slide-active .slider-halfscreen__images-slide-inner'),
  220.           $linkLine = $sliderContent.find('.swiper-slide-active .slider-halfscreen__link-line');
  221.  
  222.         if (!$targetBackground.length) {
  223.           return;
  224.         }
  225.  
  226.         TweenMax.to($targetBackground, 0.6, {
  227.           scale: 1,
  228.           ease: Expo.easeInOut
  229.         });
  230.  
  231.         TweenMax.to($linkLine, 0.6, {
  232.           width: '60px',
  233.           ease: Expo.easeInOut
  234.         });
  235.  
  236.       });
  237.  
  238.   }
  239.  
  240. }
  241.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement