Parallax

Yes, there’s a parallax.js plugin. The problem with that one is you can’t make it editable, and also it gets REAL wacky sometimes with things like accordions. So this one works better! It was originally built by Chris.

How To

Script

banno-functions.js

Put this parallax script inside your banno-functions.js file.

function parallaxScrolling() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      height = $(window).height();

  $(".parallax").each(function(){
      var parallaxPosition = $(this).offset().top,
          difference = scrollTop - parallaxPosition,
          bodyHeight = $(window).height();
      if($(window).width() > 767) {
        $(this).find('.parallax-background img').css({"transform": "translate3d(-50%, " + difference + "px, 0)", "min-height": bodyHeight});
      } else {
        $(this).find('.parallax-background img').css({"transform": "translate3d(-50%, 0, 0)", "min-height": "100%"});
      }
  });
}

scripts.js

Call parallaxScrolling(); in your scripts.js in these places:

• within the else of the window on load
• the window resize function
• window scroll
• wherever else you might need it

CSS

In your helpers.scss, add this setup:

// Parallax images
// =================================================
.parallax {
  overflow: hidden;
  .parallax-background {
    img {
      position: absolute;
      top: 0;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      max-width: none;
      transform: translate3d(-50%,0,0);
      z-index: 0;
    }
  }
  &.parallax-stack {
    .parallax-background {
      overflow: hidden;
      position: relative;
    }
  }
}

In whatever section your parallax exists (home.scss, banners.scss, etc.), make sure the parallaxing area has a height.

You may need to change the z-index of various aspects, including the class within helpers.scss.

HTML

Ensure that your HTML is set up correctly as per the below example. The example below shows a hard-coded image, but this setup also works with a content area/editable background image!

<div class="parallax-section parallax parallax-stack">
    <div class="parallax-section-image parallax-background">
    	<img src="/assets/img/parallax-img.jpg" alt="">
    </div>
    <div class="container parallax-section-text">
    	<!-- rows, container, etc. can all go within here -->
    </div>
</div>

Example Sites

• Timberland Bank (Non-editable images within nav, OLB, ads, etc.)
• Community Resource Credit Union (Editable background image on the “community” section)
• Neighborhood Credit Union (Uses the parallax.js plugin for non-editable parallax backgrounds inside the Neighborhood hero ad text, eagle image partway down the page, social media area background)

Tags: parallax, bs2, bs3, bs4, animation