DPM

fitrst attemt

by Glynne Turner

HTML

<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,500,700,800i&display=swap" rel="stylesheet">
<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="images" class="wrapper">
      <p class="images-byline">You can view any property that you like, anywhere in the world.......</p>
      <p class="images-byline-2" >.... on a device of your choice</p>
 
      <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="https://www.thanet-web-design.com/DPM/images/iphone_1.jpg" >
          <img id="davegamache-dot-com" class="iphone-content" src="https://www.thanet-web-design.com/DPM/images/iphone_2.jpg"  >
        </div>
      </div>
    </section>
    <section id="links">
      <p class="links-byline">Learn how to make your parallax site smooth like this one.</p>
       <p class="links-byline2">Learn how to make your parallax site smooth like this one.</p>
      <a class="btn" href="https://medium.com/@dhg/82ced812e61c">Read about it on Medium</a>
    </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>
       ...

CSS

body {
  background: #666666;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
}
li{ list-style-type:none}
.background {
  position: fixed;
  width: 100%;
  height: 100%; 
  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: 60px; }
.dei-3  { top: 0;   left: 120px; }
.dei-4  { top: 0;   left: 170px; }
.dei-5  { top: 60px;   left: 0;  }
.dei-6  { top: 60px;   left: 60px; }
.dei-7  { top: 60px;   left: 120px; }
.dei-8  { top: 60px;   left: 170px; }
.dei-9  { top: 120px;   left: 0;  }
.dei-10  { top: 120px;   left:...

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%',
               ...