html 多个对象的视差效应

Posted 2021-05-11

// If you want the images to use the top as a reference, remove the scrollBottom() function below and replace line 17 with scrollTop()
$.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    $.fn.parallax = function(options){
    var $$ = $(this);
    offset = $$.offset();
    var defaults = {
      'start': 0,
      'stop': offset.top + $$.height(),
      'coeff': 0.95 // base speed
    };
    var opts = $.extend(defaults, options);
    return this.each(function(){
      $(window).bind('scroll', function() {
        windowTop = $(window).scrollBottom();
        if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
          newCoord = windowTop * opts.coeff;
          $$.css({
              'background-position': '0 '+ newCoord + 'px'
          });
        }
      });
    });
  };
  $('.parallax-images').parallax({ 'coeff': -0.65 });
  $('.parallax-images .backgroundImage1').parallax({ 'coeff': 0.35 }); // Rate of speed
  $('.parallax-images .backgroundImage2').parallax({ 'coeff': 0.05 });

.parallax-images {
  position: relative;
  // might need to add a height
  .backgroundImage1 { background: url('image.png') no-repeat; width: xxpx; position: fixed; height: 100%; top: xx%; left: xx%;
  }
  .backgroundImage2 { background: url('image.png') no-repeat; width: xxpx; position: fixed; height: 100%; top: xx%; left: xx%;
  }
}

// If you need images to pass under elements such as a full-width banner, add a z-index to the element under which you want the background image to pass.

<div  class="section">
  <div class="parallax-images">
    <div class="backgroundImage1"></div>
    <div class="backgroundImage2"></div>
  </div>
</div>