DPM

tester

by Glynne Turner

HTML

<div class="container">
  <div class="container-inner">
    <div class="background"></div>
    <section id="intro" class="wrapper">
      <h1 class="name"  >Parallax Demo</h1>
      <h2 class="byline"  >An experiment by Dave Gamache</h2>
    </section>
    <section id="explosion" class="wrapper">
      <p class="explosion-byline" >Here's an example of 16 elements scaling, fading and moving at once.</p>
      <ul id="domExplosionList"  >
        <li class="dom-explosion-item dei-1"  ></li>
        <li class="dom-explosion-item dei-2"  ></li>
        <li class="dom-explosion-item dei-3"  ></li>
        <li class="dom-explosion-item dei-4"  ></li>
        <li class="dom-explosion-item dei-5"  ></li>
        <li class="dom-explosion-item dei-6"  ></li>
        <li class="dom-explosion-item dei-7"  ></li>
        <li class="dom-explosion-item dei-8"  ></li>
        <li class="dom-explosion-item dei-9"  ></li>
        <li class="dom-explosion-item dei-10"  ></li>
        <li class="dom-explosion-item dei-11"  ></li>
        <li class="dom-explosion-item dei-12"  ></li>
        <li class="dom-explosion-item dei-13"  ></li>
        <li class="dom-explosion-item dei-14"  ></li>
        <li class="dom-explosion-item dei-15"  ></li>
        <li class="dom-explosion-item dei-16"  ></li>
         
      </ul>
    </section>
    <section id="images" class="wrapper">
      <p class="images-byline">Or better yet, a realistic example of showcasing some design work.</p>
      <p class="images-byline-2" >Really, anything is possible …</p>
      <img id="mediumHomepage" class="raw-page" src="http://davegamache.com/parallax/img/oversized-raw-homepage.jpg" >
      <div class="iphone" >
        <img class="iphone-frame" src="http://davegamache.com/parallax/img/iphoneframe.png">
        <div class="iphone-viewport">
          <img id="medium-profile-iphone" class="iphone-content" src="http://davegamache.com/parallax/img/medium-profile-iphone-fullsize.jpg" >
          <img...

CSS

body {
  background: #111;
  font-weight: 300;
}
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('../img/bg2.jpg');
  background-size: cover;
  background-position: center;
  text-rendering: optimizeLegibility;
}
.background:after {
  content: '';
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 1px solid rgba(255,255,255,.2);
}
.wrapper {
  display: none;
}


/* 1. Intro Keyframe
--------------------------------------- */
#intro {
  position: fixed;
  top: 48%;
  left: 10%;
  width: 80%;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}
.name {
  font-size: 35px;
  letter-spacing: 12px;
  line-height: 1.5;
  font-weight: 900;
}
.byline { 
  font-size: 15px;
  letter-spacing: 4px;
  text-align: center;
  font-weight: 300;
}
.ampersand {
  font-family: "Adobe Caslon Pro", "brandon-grotesque";
  font-style: italic;
}

/* 2. Explosion/Images/Links Structure and Text
--------------------------------------- */
#explosion,
#images {
  position: fixed;
  top: 100%;
  width: 100%;
  height: 100%;
}
.explosion-byline,
.images-byline {
  position: fixed;
  top: 63%;
  left: 10%;
  color: white;
  max-width: 22%;
  opacity: 0;
}
.images-byline-2 {
  text-align: center;
  position: fixed;
  top: 93%;
  color: white;
  width:100%;
  opacity: 0;
}

/* 3. Explosion Keyframe
--------------------------------------- */
#domExplosionList {
  position: fixed;
  width: 270px;
  top: 100%;
  right: 15%;
  opacity: 0;
}
.dom-explosion-item {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fff;
}
.dei-1  { top: 0;   left: 0;  }
.dei-2  { top: 0;   left: 70px; }
.dei-3  { top: 0;   left: 140px; }
.dei-4  { top: 0;   left: 210px; }
.dei-5  { top: 70px;   left: 0;  }
.dei-6  { top: 70px;   left: 70px; }
.dei-7  { top: 70px;   left: 140px; }
.dei-8  { top: 70px;   left: 210px; }
.dei-9  { top: 140px;   left: 0;  }
.dei-10 { top: 140px;   left: 70px; }
.dei-11 { top:...

JavaScript

(function() {
  $(function() {

    /*  Globals
    -------------------------------------------------- */
    var PROPERTIES =               ['translateX', 'translateY', 'opacity', 'rotate', 'scale'],
        $window =                  $(window),
        $body =                    $('body'),
        wrappers =                 [],
        currentWrapper =           null,
        scrollTimeoutID =          0,
        bodyHeight =               0,
        windowHeight =             0,
        windowWidth =              0,
        prevKeyframesDurations =   0,
        scrollTop =                0,
        relativeScrollTop =        0,
        currentKeyframe =          0,
        keyframes = [
          {
            'wrapper' : '#intro',
            'duration' : '100%',
            'animations' :  [
              {
                'selector'    : '.name',
                'translateY'  : -140,
                'opacity'     : 0
              } , {
                'selector'    : '.byline',
                'translateY'  : -110,
                'opacity'     : 0
              } , {
                'selector'    : '.twitter',
                'opacity'     : [1, 0]
              }
            ]
          } , {
            'wrapper' : '#explosion',
            'duration' : '150%',
            'animations' :  [
              {
                'selector'    : '.explosion-byline',
                'translateY'  : '-25%',
                'opacity'     : [0, 1.75] // hack to accelrate opacity speed
              } , {
                'selector'    : '#domExplosionList',
                'translateY'  : '-70%',
                'opacity'     : [0, 1] // hack to accelrate opacity speed
              }
            ]
          } , {
            'wrapper' : '#explosion',
            'duration' : '150%',
            'animations' :  [
              {
                'selector'    : '.dei-1',
                'translateY'  : '-15%',
                'translateX'  : '-10%',
               ...