JAVASCRIPT   31

functions parallax

Guest on 27th June 2022 03:57:16 PM

  1. /* PARALLAX */
  2. ;(function($){
  3.     $.fn.parallax = function () {
  4.         var window_width = $(window).width();
  5.         // Parallax Scripts
  6.         return this.each(function(i) {
  7.             var $this = $(this);
  8.             $this.addClass('parallax');
  9.  
  10.             function updateParallax(initial) {
  11.                 var container_height;
  12.                 if (window_width < 601) {
  13.                     container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
  14.                 }
  15.                 else {
  16.                     container_height = ($this.height() > 0) ? $this.height() : 500;
  17.                 }
  18.  
  19.                 var $img = $this.children("img").first();
  20.                 var img_height = $img.height();
  21.                 var parallax_dist = img_height - container_height;
  22.                 var bottom = $this.offset().top + container_height;
  23.                 var top = $this.offset().top;
  24.                 var scrollTop = $(window).scrollTop();
  25.                 var windowHeight = window.innerHeight;
  26.                 var windowBottom = scrollTop + windowHeight;
  27.                 var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
  28.                 var parallax = Math.round((parallax_dist * percentScrolled));
  29.  
  30.                 if (initial) {
  31.                     $img.css('display', 'block');
  32.                 }
  33.  
  34.                 if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
  35.                     $img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
  36.                 }
  37.             }
  38.  
  39.             //- Wait for image load -//
  40.             $this.children("img").one("load", function() {
  41.                 updateParallax(true);
  42.             }).each(function() {
  43.                 if(this.complete) $(this).load();
  44.             });
  45.  
  46.             $(window).scroll(function() {
  47.                 window_width = $(window).width();
  48.                 updateParallax(false);
  49.             });
  50.  
  51.             $(window).resize(function() {
  52.                 window_width = $(window).width();
  53.                 updateParallax(false);
  54.             });
  55.         });
  56.     };
  57. }(jQuery));
  58.  
  59. (function($){
  60.     $(function(){
  61.         $('.parallax').parallax();
  62.     });
  63. })(jQuery);

Raw Paste


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