JAVASCRIPT   9

parallax-background.js

Guest on 25th July 2021 04:05:47 PM

  1. /**
  2.  * Parallax Background version 1.2
  3.  * https://github.com/erensuleymanoglu/parallax-background
  4.  *
  5.  * by Eren Suleymanoglu
  6.  */
  7. ;(
  8.         function( $, window, document, undefined ) {
  9.  
  10.                 if ( ! window.requestAnimationFrame ) {
  11.                         return;
  12.                 }
  13.  
  14.                 $.parallaxBackground = function( element, options ) {
  15.  
  16.                         var defaults = {
  17.                                 parallaxResizeWatch : null,
  18.                                 parallaxBgImage         : '',
  19.                                 parallaxBgPosition      : 'center center',
  20.                                 parallaxBgRepeat        : 'no-repeat',
  21.                                 parallaxBgSize          : 'cover',
  22.                                 parallaxSpeed           : 0.5,
  23.                                 parallaxSpeedTablet : 0.5,
  24.                                 parallaxSpeedMobile : 0.5,
  25.                                 parallaxDirection       : 'down',
  26.                                 breakpoints             : {
  27.                                         'mobile'        : 768,
  28.                                         'tablet'        : 1024,
  29.                                 }
  30.                         };
  31.  
  32.                         var plugin = this;
  33.  
  34.                         plugin.opts = {};
  35.  
  36.                         var $element    = $(element),
  37.                                 $parallax       = null,
  38.                                 $window         = $(window),
  39.                                 $parallax_inner, d, e, h, p, s, t, w,
  40.                                 pt, pb, pl, pr, hd, wd, wh, ww,
  41.                                 x = 0,
  42.                                 y = 0,
  43.                                 z = 0,
  44.                                 i = 0,
  45.                                 f = 1,
  46.                                 lastScrollY = ( $window.get(0).pageYOffset || document.documentElement.scrollTop )  - ( document.documentElement.clientTop || 0 ),
  47.                                 frameRendered = true,
  48.                                 scroll_top = 0;
  49.  
  50.                         plugin.init = function() {
  51.                                 plugin.opts = $.extend({}, defaults, options);
  52.                                 plugin._construct();
  53.                         };
  54.  
  55.                         plugin._construct = function() {
  56.  
  57.                                 plugin.setup();
  58.                                 plugin.events();
  59.  
  60.                         };
  61.  
  62.                         plugin.render = function() {
  63.                                 if ( frameRendered !== true ) {
  64.                                         plugin.move();
  65.                                 }
  66.                                 window.requestAnimationFrame( plugin.render );
  67.                                 frameRendered = true;
  68.                         }
  69.  
  70.                         plugin.setup = function() {
  71.  
  72.                                 // Remove background image on parent element
  73.                                 $element.css( 'background-image', 'none' );
  74.  
  75.                                 if ($element.find('.ee-parallax').length < 1) {
  76.                                         $element.prepend('<div class="ee-parallax"></div>');
  77.                                 }
  78.  
  79.                                 $parallax = $element.find('.ee-parallax');
  80.  
  81.                                 if ($parallax.find('.ee-parallax__inner').length < 1) {
  82.                                         $parallax.prepend('<div class="ee-parallax__inner"></div>');
  83.                                 }
  84.  
  85.                                 $parallax_inner = $parallax.find('.ee-parallax__inner');
  86.  
  87.                                 d = plugin.getElementSize($parallax);
  88.                                 e = plugin.repositionBackground($parallax, d);
  89.  
  90.                                 $element.css({
  91.                                         'z-index': 0,
  92.                                 });
  93.  
  94.                                 $parallax_inner.css({
  95.                                         'position'      : 'absolute',
  96.                                         'width'         : d[0],
  97.                                         'height'        : d[1],
  98.                                         'transform'     : 'translate3d(' + e[0] + 'px, ' + e[1] + 'px, ' + e[2] + 'px)',
  99.                                         'z-index'       : '-1'
  100.                                 });
  101.  
  102.                                 if (plugin.opts.parallaxDirection === 'left' || plugin.opts.parallaxDirection === 'right') {
  103.                                         p = 0;
  104.                                         s = e[0];
  105.                                 }
  106.  
  107.                                 if (plugin.opts.parallaxDirection === 'up' || plugin.opts.parallaxDirection === 'down') {
  108.                                         p = 0;
  109.                                         s = e[1];
  110.                                 }
  111.  
  112.                                 if ( $element.visible(true) ) {
  113.                                         scroll_top = $window.scrollTop();
  114.                                 } else {
  115.                                         scroll_top = $parallax.offset().top;
  116.                                 }
  117.  
  118.                         };
  119.  
  120.                         plugin.refresh = function() {
  121.  
  122.                                 // Wait for Elementor's stretch function to execute
  123.                                 setTimeout( function() { plugin.adjust(); }, 100);
  124.                                 plugin.move();
  125.                         };
  126.  
  127.                         plugin.events = function() {
  128.  
  129.                                 $(document).ready(function() {
  130.                                         plugin.render();
  131.                                 });
  132.                                
  133.                                 // Bind to window resize
  134.                                 $window.on( 'resize', plugin.refresh );
  135.  
  136.                                 // Bind to resize of custom element
  137.                                 if ( plugin.opts.parallaxResizeWatch ) {
  138.                                         plugin.opts.parallaxResizeWatch._resize( plugin.refresh );
  139.                                 }
  140.  
  141.                                 $window.on( 'scroll', function() {
  142.                                         if ( frameRendered === true ) {
  143.                                                 lastScrollY = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop || 0);
  144.                                         }
  145.                                         frameRendered = false;
  146.                                 });
  147.  
  148.                                 // $window.on( 'scroll', function(){
  149.                                 //      plugin.move();
  150.                                 // });
  151.                         };
  152.  
  153.                         plugin.getElementSize = function( parent ) {
  154.                                 w = parent.width();
  155.                                 h = parent.height();
  156.  
  157.                                 wh = $window.height();
  158.                                 ww = $window.width();
  159.  
  160.                                 if ( plugin.isMobile() ) {
  161.                                         f = 2;
  162.                                 } else { f = 1; }
  163.  
  164.                                 if (plugin.opts.parallaxDirection === 'left' || plugin.opts.parallaxDirection === 'right') {
  165.                                         w += f * Math.ceil( ww * plugin.getSpeed() );
  166.                                 }
  167.  
  168.                                 if (plugin.opts.parallaxDirection === 'up' || plugin.opts.parallaxDirection === 'down') {
  169.                                         h += f * Math.ceil( wh * plugin.getSpeed() );
  170.                                 }
  171.  
  172.                                 return [w, h];
  173.                         };
  174.  
  175.                         plugin._getProgress = function() {
  176.                                 return ( ( lastScrollY - $parallax_inner.offset().top + wh ) / ( wh + h ) );
  177.                         };
  178.  
  179.                         plugin.repositionBackground = function( el, d ) {
  180.                                 pl = parseInt( el.css('padding-left').replace('px', '') );
  181.                                 pr = parseInt( el.css('padding-right').replace('px', ''));
  182.                                 pt = parseInt( el.css('padding-top').replace('px', ''));
  183.                                 pb = parseInt( el.css('padding-bottom').replace('px', ''));
  184.  
  185.                                 hd = (d[1] - el.outerHeight()) / 2;
  186.                                 wd = (d[0] - el.outerWidth()) / 2;
  187.  
  188.                                 switch (plugin.opts.parallaxDirection) {
  189.                                         case 'up':
  190.                                                 x = -pl;
  191.                                                 y = -(hd + pt);
  192.                                                 z = 0;
  193.                                                 break;
  194.                                         case 'down':
  195.                                                 x = -pl;
  196.                                                 y = -(hd + pt);
  197.                                                 z = 0;
  198.                                                 break;
  199.                                         case 'left':
  200.                                                 x = -(wd + pl);
  201.                                                 y = -pt;
  202.                                                 z = 0;
  203.                                                 break;
  204.                                         case 'right':
  205.                                                 x = -(wd + pl);
  206.                                                 y = -pt;
  207.                                                 z = 0;
  208.                                                 break;
  209.                                 }
  210.  
  211.                                 return [x, y, z];
  212.                         };
  213.  
  214.                         plugin.adjust = function() {
  215.  
  216.                                 d = plugin.getElementSize( $parallax );
  217.                                 e = plugin.repositionBackground( $parallax, d );
  218.  
  219.                                 if (plugin.opts.parallaxDirection === 'left' || plugin.opts.parallaxDirection === 'right') {
  220.                                         p = 0;
  221.                                         s = e[0];
  222.                                 }
  223.  
  224.                                 if (plugin.opts.parallaxDirection === 'up' || plugin.opts.parallaxDirection === 'down') {
  225.                                         p = 0;
  226.                                         s = e[1];
  227.                                 }
  228.  
  229.                                 $parallax_inner.css({
  230.                                         'width'         : d[0],
  231.                                         'height'        : d[1],
  232.                                         'transform'     : 'translate3d(' + e[0] + 'px, ' + e[1] + 'px, ' + e[2] + 'px)'
  233.                                 });
  234.  
  235.                         };
  236.  
  237.                         plugin.move = function() {
  238.  
  239.                                 if ( ! $element.visible( true ) )
  240.                                         return;
  241.  
  242.                                 i = $window.scrollTop() - scroll_top;
  243.  
  244.                                 p = i * ( plugin.getSpeed() / 4 );
  245.  
  246.                                 if (plugin.opts.parallaxDirection === 'up') {
  247.                                         s += -p;
  248.                                         t = 'translate3d(' + e[0] + 'px, ' + s + 'px, ' + e[2] + 'px)';
  249.                                 }
  250.  
  251.                                 if (plugin.opts.parallaxDirection === 'down') {
  252.                                         s += p;
  253.                                         t = 'translate3d(' + e[0] + 'px, ' + s + 'px, ' + e[2] + 'px)';
  254.                                 }
  255.  
  256.                                 if (plugin.opts.parallaxDirection === 'left') {
  257.                                         s += p;
  258.                                         t = 'translate3d(' + s + 'px, ' + e[1] + 'px, ' + e[2] + 'px)';
  259.                                 }
  260.  
  261.                                 if (plugin.opts.parallaxDirection === 'right') {
  262.                                         s += -p;
  263.                                         t = 'translate3d(' + s + 'px, ' + e[1] + 'px, ' + e[2] + 'px)';
  264.                                 }
  265.  
  266.                                 $parallax_inner.css({
  267.                                         'width'         : d[0],
  268.                                         'height'        : d[1],
  269.                                         'transform'     : t
  270.                                 });
  271.  
  272.                                 scroll_top = $window.scrollTop();
  273.                         };
  274.  
  275.                         plugin.getSpeed = function() {
  276.                                 var speed = plugin.opts.parallaxSpeed;
  277.  
  278.                                 if ( plugin.isTablet() ) {
  279.                                         speed = plugin.opts.parallaxSpeedTablet;
  280.                                 } else if ( plugin.isMobile() ) {
  281.                                         speed = plugin.opts.parallaxSpeedMobile;
  282.                                 }
  283.  
  284.                                 return parseFloat( speed );
  285.                         };
  286.  
  287.                         plugin.isTablet = function() {
  288.                                 return $window.width() < plugin.opts.breakpoints['tablet'] && $window.width() >= plugin.opts.breakpoints['mobile'];
  289.                         };
  290.  
  291.                         plugin.isMobile = function() {
  292.                                 return $window.width() < plugin.opts.breakpoints['tablet'] && $window.width() < plugin.opts.breakpoints['mobile'];
  293.                         };
  294.  
  295.                         plugin.isDesktop = function() {
  296.                                 return $window.width() > plugin.opts.breakpoints['tablet'];
  297.                         };
  298.  
  299.                         plugin.destroy = function() {
  300.                                 $parallax.remove();
  301.                                 $parallax_inner.remove();
  302.                                 $element.css( 'background-image', "" )
  303.                                 $element.removeData( 'parallaxBackground' );
  304.                         };
  305.  
  306.                         plugin.init();
  307.  
  308.                 };
  309.  
  310.                 $.fn.parallaxBackground = function(options) {
  311.                         return this.each(function() {
  312.  
  313.                                 $.fn.parallaxBackground.destroy = function() {
  314.                                         if( 'undefined' !== typeof( plugin ) ) {
  315.                                                 $(this).data( 'parallaxBackground' ).destroy();
  316.                                                 $(this).removeData( 'parallaxBackground' );
  317.                                         }
  318.                                 }
  319.  
  320.                                 if (undefined === $(this).data('parallaxBackground')) {
  321.                                         var plugin = new $.parallaxBackground(this, options);
  322.                                         $(this).data('parallaxBackground', plugin);
  323.                                 }
  324.                         });
  325.                 };
  326.  
  327.         }
  328.  
  329. )( jQuery, window, document );

Raw Paste


Login or Register to edit or fork this paste. It's free.