1

I am trying to use the Bourbon Parallax Refill for multiple backgrounds on a page. This is where I am getting the code from:

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

And my codepen setup:

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

My code is as follows:

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');
  }
}

I need to have different background images for each one, with parallax working for all three. At the moment only the first one is working.

Thanks!

Mike

Mike Harrison
  • 1,020
  • 2
  • 15
  • 42

1 Answers1

0

You can use classes to call the parallax functions to multiple elements.

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

Heri Hehe Setiawan
  • 1,535
  • 1
  • 12
  • 19