fatik · September 16, 2014 03:24 · jobayerarman · Nov 20, 2015
diff --git a/parallax-header.css b/parallax-header.css
 body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
 }

 #hero {
  position: relative;
  height: 750px;
  overflow: hidden;
 }

 #hero-bg {
  position: absolute;
  width: 100%;
  height: 750px;
  top: 0;
  bottom: 0;

  background-image: url('bg@2x.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
 }

 .hero-content {
  position: absolute;
  right: 0;
  left: 0;
  top: 15em;
  padding: 1em;
  margin: auto;
  width: 300px;
  text-align: center;
  background: rgba(0,0,0,0.25);
  color: white;
 }
diff --git a/parallax-header.html b/parallax-header.html
 <!DOCTYPE html>
 <html lang="en-us">
 <head>
  <meta charset="utf-8">
  <title>Asparagus demo</title>
  <link rel="stylesheet" href="parallax-header.css" />
 </head>
 <body>
  <div id="hero">
    <div id="hero-bg"></div>

    <div class="hero-content">
      <h1>rAF + translate3d</h1>
      <p>Written in native Javascript using a single ticking requestAnimationFrame() method and translate3d to ensure GPU acceleration.</p>
    </div>

  </div>

  <h1>Demo lorem</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis accumsan nunc, non interdum est pellentesque ut. Duis semper arcu vel eros congue lacinia non vitae sapien. Morbi porttitor est et est facilisis hendrerit. Phasellus accumsan nibh sit amet aliquam tincidunt. Vivamus dapibus neque eget orci sagittis fringilla. Phasellus dignissim elementum urna id porttitor. Nullam ultricies euismod turpis eget semper. Curabitur tincidunt porta urna a ultrices. Donec eu bibendum nisl. Vivamus sapien tellus, accumsan vitae enim eget, condimentum commodo nisl. Curabitur feugiat tristique lectus, sed sagittis enim scelerisque sit amet. Quisque luctus tellus arcu, eget venenatis mauris fermentum non. Duis eget magna at dolor laoreet vehicula nec a erat. Nullam pellentesque viverra elementum. Cras ac dictum arcu. Fusce ac aliquet tortor.</p>

  <p>Integer vehicula quam non egestas pulvinar. Curabitur euismod est vitae tincidunt adipiscing. Curabitur molestie tincidunt mauris, et bibendum urna ultricies non. Aliquam ultrices, purus vitae pellentesque tincidunt, nisi orci dapibus dolor, vitae laoreet massa lectus bibendum nibh. Sed placerat ac nisl sed viverra. Etiam congue purus in aliquet varius. In hac habitasse platea dictumst. Donec eget enim mollis, porttitor nisi suscipit, condimentum nisi. Pellentesque eget tellus ut felis convallis fermentum. Donec et leo sed quam dignissim semper. Phasellus et tellus et massa mattis tempus et vitae est. Nulla quis sollicitudin orci, ac vestibulum lectus. Aliquam dignissim eu ipsum nec fringilla. Cras eget sapien nec nisi sollicitudin aliquam.</p>

  <h2>Ipsum awesome</h2>

  <p>Maecenas auctor urna ut ante pulvinar lacinia ac sed leo. Aenean vehicula quis odio sit amet hendrerit. Curabitur fringilla augue eu tincidunt pellentesque. Integer eget nibh sit amet metus ullamcorper consequat. Quisque in pretium elit, vel ornare urna. Cras eu velit tortor. Suspendisse ut sollicitudin lectus. Morbi laoreet metus ut mauris placerat laoreet. Morbi nec eleifend dui.</p>

  <p>Aenean nec eros velit. Praesent hendrerit ligula eu purus rhoncus, vitae molestie elit porta. Aliquam nibh turpis, faucibus vitae mollis sit amet, auctor ut augue. Sed eu ultrices velit, a convallis dui. Ut fringilla nibh tortor. Aliquam erat volutpat. Etiam dignissim ullamcorper mollis. Etiam ultrices nunc eget risus tempus elementum. Praesent quis enim vestibulum, fringilla arcu eu, ornare massa. In luctus, dui non interdum semper, eros est hendrerit diam, sed fringilla massa arcu eget quam. Nunc pretium eros in malesuada pretium. Duis id interdum mi. Cras imperdiet, lectus ut ultrices imperdiet, nisl tellus lacinia sapien, ac hendrerit erat lorem a nisl. Donec faucibus orci a neque suscipit fermentum.</p>

  <p>Nunc ornare feugiat nisl, eu lacinia nulla malesuada et. Maecenas porta orci nec ipsum faucibus aliquam. Suspendisse potenti. In iaculis eu magna a commodo. Curabitur leo nisl, viverra a justo sed, tincidunt facilisis mi. Aenean neque mi, condimentum vel nisl eu, faucibus dapibus dui. Nulla quis dictum metus, quis ultricies neque. Suspendisse egestas tristique libero, at dapibus ante. Sed eu justo a felis rutrum sollicitudin. Maecenas non quam eget odio iaculis sodales rutrum ut justo. Nulla mi dui, lacinia nec felis nec, convallis gravida erat. Etiam hendrerit viverra quam eget feugiat. In a iaculis lacus. Pellentesque gravida lorem eu congue porttitor. Donec ornare fermentum pulvinar.</p>

  <h2>Dolor cool</h2>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis accumsan nunc, non interdum est pellentesque ut. Duis semper arcu vel eros congue lacinia non vitae sapien. Morbi porttitor est et est facilisis hendrerit. Phasellus accumsan nibh sit amet aliquam tincidunt. Vivamus dapibus neque eget orci sagittis fringilla. Phasellus dignissim elementum urna id porttitor. Nullam ultricies euismod turpis eget semper. Curabitur tincidunt porta urna a ultrices. Donec eu bibendum nisl. Vivamus sapien tellus, accumsan vitae enim eget, condimentum commodo nisl. Curabitur feugiat tristique lectus, sed sagittis enim scelerisque sit amet. Quisque luctus tellus arcu, eget venenatis mauris fermentum non. Duis eget magna at dolor laoreet vehicula nec a erat. Nullam pellentesque viverra elementum. Cras ac dictum arcu. Fusce ac aliquet tortor.</p>

   <p>Aenean nec eros velit. Praesent hendrerit ligula eu purus rhoncus, vitae molestie elit porta. Aliquam nibh turpis, faucibus vitae mollis sit amet, auctor ut augue. Sed eu ultrices velit, a convallis dui. Ut fringilla nibh tortor. Aliquam erat volutpat. Etiam dignissim ullamcorper mollis. Etiam ultrices nunc eget risus tempus elementum. Praesent quis enim vestibulum, fringilla arcu eu, ornare massa. In luctus, dui non interdum semper, eros est hendrerit diam, sed fringilla massa arcu eget quam. Nunc pretium eros in malesuada pretium. Duis id interdum mi. Cras imperdiet, lectus ut ultrices imperdiet, nisl tellus lacinia sapien, ac hendrerit erat lorem a nisl. Donec faucibus orci a neque suscipit fermentum.</p>

  <script src="parallax-header.js"></script>
 </body>
 </html>
diff --git a/parallax-header.js b/parallax-header.js
 (function() {
  var lastScrollY = 0,
      ticking = false,
      bgElm = document.getElementById('hero-bg'),
      speedDivider = 2;

  // Update background position
  var updatePosition = function() {
    var translateValue = lastScrollY / speedDivider;

    // We don't want parallax to happen if scrollpos is below 0
    if (translateValue < 0)
      translateValue = 0;

    translateY(bgElm, translateValue);

    // Stop ticking
    ticking = false;
  };

  // Translates an element on the Y axis using translate3d to ensure
  // that the rendering is done by the GPU
  var translateY = function(elm, value) {
    var translate = 'translate3d(0px,' + value + 'px, 0px)';
    elm.style['-webkit-transform'] = translate;
    elm.style['-moz-transform'] = translate;
    elm.style['-ms-transform'] = translate;
    elm.style['-o-transform'] = translate;
    elm.style.transform = translate;
  };

  // This will limit the calculation of the background position to
  // 60fps as well as blocking it from running multiple times at once
  var requestTick = function() {
    if (!ticking) {
      window.requestAnimationFrame(updatePosition);
      ticking = true;
    }
  };

  // Update scroll value and request tick
  var doScroll = function() {
    lastScrollY = window.scrollY;
    requestTick();
  };

  // Initialize on domready
  (function() {
    var loaded = 0;
    var bootstrap = function() {
      if (loaded) return;
      loaded = 1;

      rafPolyfill();
      window.onscroll = doScroll;
    };

    if ( document.readyState === 'complete' ) {
      setTimeout( bootstrap );
    } else {
      document.addEventListener( 'DOMContentLoaded', bootstrap, false );
      window.addEventListener( 'load', bootstrap, false );
    }
  })();

  // RequestAnimationFrame polyfill for older browsers
  var rafPolyfill = function() {
    var lastTime, vendors, x;
    lastTime = 0;
    vendors = ["webkit", "moz"];
    x = 0;
    while (x < vendors.length && !window.requestAnimationFrame) {
      window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
      window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
      ++x;
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function(callback, element) {
        var currTime, id, timeToCall;
        currTime = new Date().getTime();
        timeToCall = Math.max(0, 16 - (currTime - lastTime));
        id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
    }
  };

 }).call(this);
No results found