DPM

first attempt

by Glynne Turner

HTML

<div id ="wrapper">
  
    <section id="intro" class="wrapper">
      <h1 class="name three_d"  >DIGI PROPERTY o</h1>
      <h2 class="byline"  >This is a tag line</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="https://www.thanet-web-design.com/DPM/images/iphoneframe.png">
        <div class="iphone-viewport">
          <img id="profile-iphone" class="iphone-content" src="https://www.thanet-web-design.com/DPM/images/iphone_1.jpg" >
          <img id="iphone_content" class="iphone-content" src="https://www.thanet-web-design.com/DPM/images/iphone_2.jpg"  >
        </div>
      </div>
    </section>
    <section id="links" class="red">
      <p class="links-byline">this is a line of text.</p>
       <p class="links-byline2">another line of text to fade in .</p>
      <a class="btn" href="https://medium.com/@dhg/82ced812e61c">This a button</a>
    </section>
      
    <section id="links2">
      <p class="links-byline">this is a line of text.</p>
       <p class="links-byline2">another line of text to fade in .</p>
      <a class="btn" href="https://medium.com/@dhg/82ced812e61c">This a button</a>
    </section>
    
     <section id="end">
      <p class="links-byline">this is the end</p> 
       
    </section>
    <section id="another" class="red">
      <p class="links-byline">this is the an added bonus</p> 
       
    </section>
     <section id="explosion" class="wrapper">
      <p class="explosion-byline" >The logo will go here and explode</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...

CSS

*{margin:0; padding:0; }
body {
  background: #888888;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
}
#wrapper{background-color:pink;height:100%; position:relative; padding-bottom:5000px}
li{ list-style-type:none}
.background {
  position: fixed;
  width: 100%;
  height: 100%; 
  background-size: cover;
  background-position: center;
  text-rendering: optimizeLegibility;
  background-image:url('https://sleeklens.com/wp-content/uploads/2018/07/portrait-presets-luts-video-photos-cinematic-actions-presets-2-365x243.jpg');
  background-size:cover;
}
.red{background-color:red !important}
h1.three_d {
			text-align: center; 
    top: 50%; 
    right: 50%; 
    text-transform: uppercase;  
    font-size:60px;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}  


/* 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;
} 

/* 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...

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' : '#images',
            'duration' : '150%',
            'animations' :  [
              {
                'selector'    : '.images-byline',
                'translateY'  : '-25%',
                'opacity'     : [0, 1.75] // hack to accelrate opacity speed
              } , {
                'selector'    : '#mediumHomepage',
                'translateY'  : '-90%'
              } , {
                'selector'    : '.iphone',
                'translateY'  : '-66%'
              }
            ]
          } , {
            'wrapper' : '#images',
            'duration' : '75%',
            'animations' :  []
          } , {
            'wrapper' : '#images',
            'duration' : '150%',
            'animations' :  [
              {
        ...