jquery - 多重视差背景

Question

我正在尝试将 Bourbon Parallax Refill 用于页面上的多个背景。这是我从中获取代码的地方:

http://refills.bourbon.io/components/#er-toc-id-14

还有我的代码笔设置:

http://codepen.io/mikehdesign/pen/jEKLPj

我的代码如下:

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<div id="js-parallax-window" class="parallax-window">
<div class="parallax-static-content">
<b>Parallax Window</b>
</div>
<div id="js-parallax-background" class="parallax-background"></div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<div id="js-parallax-window" class="parallax-window">
  <div class="parallax-static-content">
    <b>Parallax Window</b>
  </div>
  <div id="js-parallax-background" class="parallax-background"></div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<div id="js-parallax-window" class="parallax-window">
  <div class="parallax-static-content">
    <b>Parallax Window</b>
  </div>
  <div id="js-parallax-background" class="parallax-background"></div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa a leo blandit vestibulum. Vestibulum quis quam justo. Phasellus tempus, nisi et finibus luctus, nibh elit porta nisi, sed vulputate magna mauris sit amet sapien. Sed ultricies, turpis nec molestie tempus, sapien leo tincidunt neque, quis sagittis risus nulla non risus. Integer varius eleifend vulputate. Donec mattis, ante eu ultrices efficitur, augue mi consectetur sapien, sit amet dictum mi felis sit amet ipsum. Nam consequat fermentum sapien eget accumsan. Suspendisse et congue quam. Sed interdum nisl odio, in maximus lacus elementum ac. Mauris quis lobortis mauris, ut malesuada ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae massa et lectus venenatis volutpat.</p>

SCSS

    $parallax-window-height: 30em;
    $parallax-background-height: $parallax-window-height * 2;

    .parallax-window {
  max-height: $parallax-window-height;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

    .parallax-static-content {
  color: #9A9A8A;
  padding: 8em 0;
  position: relative;
  z-index: 9;
}

    .parallax-background {
  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png") repeat;
  background-position: top;
  background-size: cover;
  background-color: beige;
  height: $parallax-background-height;
  left: 0;
  position: absolute;
  top: - $parallax-window-height / 3;
  width: 100%;
}

JQUERY

$(document).ready(function() {
  if ($("#js-parallax-window").length) {
    parallax();
  }
});

$(window).scroll(function(e) {
  if ($("#js-parallax-window").length) {
    parallax();
  }
});

function parallax(){
  if( $("#js-parallax-window").length > 0 ) {
    var plxBackground = $("#js-parallax-background");
    var plxWindow = $("#js-parallax-window");

    var plxWindowTopToPageTop = $(plxWindow).offset().top;
    var windowTopToPageTop = $(window).scrollTop();
    var plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;

    var plxBackgroundTopToPageTop = $(plxBackground).offset().top;
    var windowInnerHeight = window.innerHeight;
    var plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
    var plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
    var plxSpeed = 0.35;

    plxBackground.css('top', - (plxWindowTopToWindowTop * plxSpeed) + 'px');
  }
}

我需要为每个图片设置不同的背景图片，并为所有三个图片设置视差。目前只有第一个在工作。

谢谢!

迈克

Answer 1

您可以使用类来调用多个元素的视差函数。

$(document).ready(function() {
  $.fn.parallax = function(){
    return $(this).each(function(){
      var plxBackground = $(this).children();
      var plxWindow = $(this);

      var plxWindowTopToPageTop = $(plxWindow).offset().top;
      var windowTopToPageTop = $(window).scrollTop();
      var plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;

      var plxBackgroundTopToPageTop = $(plxBackground).offset().top;
      var windowInnerHeight = window.innerHeight;
      var plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
      var plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
      var plxSpeed = 0.35;

      plxBackground.css('top', - (plxWindowTopToWindowTop * plxSpeed) + 'px');
    });
  }
  
  $(".js-parallax-window").parallax();
  
  $(window).scroll(function(e) {
    $(".js-parallax-window").parallax();
  });
});

<p>...</p>

<div class="js-parallax-window parallax-window">
  <div class="js-parallax-background parallax-background"></div>
</div>

<p>...</p>

<div class="js-parallax-window parallax-window">
  <div class="js-parallax-background parallax-background second"></div>
</div>

<p>...</p>

<div class="js-parallax-window parallax-window">
  <div class="js-parallax-background parallax-background third"></div>
</div>

<p>...</p>

http://codepen.io/herihehe/full/ZYRRNM/