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%;
}

查询

$(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/