Parallax effect

parallax effect js

by Lio Fleishman

HTML

<title>BlackBird Co.</title>
  <body>
    <header class="bird-box">
      <div class="back-bird"></div>
      <div class="logo"></div>
      <div class="fore-bird"></div>
    </header>
    <section class="content">
      <article>
        <h1>Unique Style</h1>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
        <hr>
        <div class="clothes-pics">
          <div class="row img-row">
            <figure class="columns four"><img src="http://devtips.github.io/Parallax-on-the-Web-DevTips-/images/model1.jpg">
              <figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
            </figure>
            <figure class="columns four"><img src="http://devtips.github.io/Parallax-on-the-Web-DevTips-/images/model2.jpg">
              <figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
            </figure>
            <figure class="columns four"><img src="http://devtips.github.io/Parallax-on-the-Web-DevTips-/images/model3.jpg">
              <figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
            </figure>
          </div>
          <div class="row img-row">
            <figure class="columns four"><img src="http://devtips.github.io/Parallax-on-the-Web-DevTips-/images/model2.jpg">
              <figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
            </figure>
            <figure class="columns four"><img src="http://devtips.github.io/Parallax-on-the-Web-DevTips-/images/model3.jpg">
              <figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
            </figure>
            <figure...

CSS

@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
...

JavaScript

(function(){

var pContainerHeight = $('.bird-box').height();
var birdBox = document.getElementsByClassName('bird-box');
var logo = document.getElementsByClassName('logo');
var foreBird = document.getElementsByClassName('fore-bird');

var onScrollFn = function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {

    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /2 +'%)'
    });

    $('.back-bird').css({
      'transform' : 'translate(0px, '+ wScroll /4 +'%)'
    });

    $('.fore-bird').css({
      'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
    });

  }


  // Landing Elements
  if(wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) {

    $('.clothes-pics figure').each(function(i){

      setTimeout(function(){
        $('.clothes-pics figure').eq(i).addClass('is-showing');
      }, (700 * (Math.exp(i * 0.14))) - 700);
    });

  }


  // Promoscope
  if(wScroll > $('.large-window').offset().top - $(window).height()){

    $('.large-window').css({'background-position':'center '+ (wScroll - $('.large-window').offset().top) +'px'});

    var opacity = (wScroll - $('.large-window').offset().top + 400) / (wScroll / 5);

    $('.window-tint').css({'opacity': opacity});

  }


  // Floating Elements

  if(wScroll > $('.blog-posts').offset().top - $(window).height()){

    var offset = (Math.min(0, wScroll - $('.blog-posts').offset().top +$(window).height() - 350)).toFixed();

    $('.post-1').css({'transform': 'translate('+ offset +'px, '+ Math.abs(offset * 0.2) +'px)'});

    $('.post-3').css({'transform': 'translate('+ Math.abs(offset) +'px, '+ Math.abs(offset * 0.2) +'px)'});

  }
};

window.addEventListener("scroll", onScrollFn);

})();