added top, left, width, height, backgroundPositionX, backgroundPositionY properties

Author: kasparsj

README.md

@@ -96,6 +96,23 @@ Hex or rgb() color string.
 #### opacity
 **Type:** number (0 - 1)
 
+#### top
+**Type:** number or string (percentage or viewport units)
+
+#### left
+**Type:** number or string (percentage or viewport units)
+
+#### width
+**Type:** number or string (percentage or viewport units)
+
+#### height
+**Type:** number or string (percentage or viewport units)
+
+#### backgroundPositionX
+**Type:** number or string (percentage or viewport units)
+
+#### backgroundPositionY
+**Type:** number or string (percentage or viewport units)
 
 ### Options
 

examples/Dave Gamache.html

@@ -24,8 +24,8 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
       </div>
       <div id="explosion-scene" class="scene" style="height: 400vh" data-parallax='{"pin":"#explosion"}'>
           <section id="explosion">
-              <p class="explosion-byline" data-parallax='[{"y":"-25%","opacity":{"from":0,"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-scene","trigger":0},{"y":"-40%","opacity":0,"start":"#explosion-scene","trigger":"-300%","duration":"100vh"}]'>Here's an example of 16 elements scaling, fading and moving at once.</p>
-              <ul id="domExplosionList" data-parallax='{"y":"-70%","opacity":{"from":0,"to":1},"duration":"150vh","start":"#explosion-scene","trigger":0}'>
+              <p class="explosion-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#explosion-scene","trigger":0},{"y":"-40%","opacity":0,"start":"#explosion-scene","trigger":"-300%","duration":"100vh"}]'>Here's an example of 16 elements scaling, fading and moving at once.</p>
+              <ul id="domExplosionList" data-parallax='{"y":"-70%","opacity":1,"duration":"150vh","start":"#explosion-scene","trigger":0}'>
                   <li class="dom-explosion-item dei-1" data-parallax='{"y":"-15%","x":"-10%","opacity":0,"scale":2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
                   <li class="dom-explosion-item dei-2" data-parallax='{"y":"-5%","x":"-4%","opacity":0,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
                   <li class="dom-explosion-item dei-3" data-parallax='{"y":"-9%","x":"2%","opacity":0,"scale":1.2,"duration":"150vh","start":"#explosion-scene","trigger":"-150%"}'></li>
@@ -47,8 +47,8 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
       </div>
       <div id="images-scene" class="scene" style="height:565vh" data-parallax='{"pin":"#images"}'>
           <section id="images">
-              <p class="images-byline" data-parallax='[{"y":"-25%","opacity":{"from":0,"to":1,"duration":"85vh"},"duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.7,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>Or better yet, a realistic example of showcasing some design work.</p>
-              <p class="images-byline-2" data-parallax='[{"opacity":{"from":0,"to":1},"y":"-15%","trigger":"-225%","duration":"150vh","start":"#images-scene"},{"opacity":{"to":0,"duration":"85vh"},"y":"50%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>Really, anything is possible …</p>
+              <p class="images-byline" data-parallax='[{"y":"-25%","opacity":{"to":1,"duration":"85vh"},"duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.7,"opacity":{"to":0,"duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>Or better yet, a realistic example of showcasing some design work.</p>
+              <p class="images-byline-2" data-parallax='[{"opacity":1,"y":"-15%","trigger":"-225%","duration":"150vh","start":"#images-scene"},{"opacity":{"to":0,"duration":"85vh"},"y":"50%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>Really, anything is possible …</p>
               <img id="mediumHomepage" class="raw-page" src="Dave%20Gamache_files/oversized-raw-homepage.jpg" data-parallax='[{"y":"-90%","duration":"150vh","start":"#images-scene","trigger":0},{"scale":0.8,"opacity":{"to":"0","duration":"85vh"},"duration":"150vh","trigger":"-225%","start":"#images-scene"}]'>
               <div class="iphone" data-parallax='[{"y":"-66%","duration":"150vh","start":"#images-scene","trigger":0},{"x":"-2%","y":"-90%","rotate":"-90","scale":1.3,"duration":"150vh","trigger":"-225%","start":"#images-scene"},{"y":"5%","x":"-2%","duration":"150vh","trigger":"-415%","start":"#images-scene"}]'>
                   <img class="iphone-frame" src="Dave%20Gamache_files/iphoneframe.png">
@@ -60,7 +60,7 @@ <h2 class="byline" data-parallax='{"y":-110,"opacity":0,"duration":"100vh","star
           </section>
       </div>
       <div id="links-scene" class="scene" style="height:100vh" data-parallax='{"pin":"#links"}'>
-          <section id="links" data-parallax='{"opacity":{"from":0,"to":1,"duration":"50vh"},"scale":{"from":0.8,"to":1},"duration":"100vh","start":"#links-scene","trigger":0}'>
+          <section id="links" data-parallax='{"opacity":{"to":1,"duration":"50vh"},"scale":{"from":0.8,"to":1},"duration":"100vh","start":"#links-scene","trigger":0}'>
               <p class="links-byline">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>

examples/Dave Gamache_files/main.css

@@ -66,6 +66,7 @@ body {
   left: 10%;
   color: white;
   max-width: 22%;
+    opacity: 0;
 }
 .images-byline-2 {
   text-align: center;
@@ -74,6 +75,7 @@ body {
   left: 25%;
   color: white;
   width: 50%;
+  opacity: 0;
 }
 
 /* 3. Explosion Keyframe
@@ -83,6 +85,7 @@ body {
   width: 270px;
   top: 100%;
   right: 15%;
+    opacity: 0;
 }
 .dom-explosion-item {
   position: absolute;
@@ -163,6 +166,7 @@ body {
   width: 80%;
   color: #fff;
   text-align: center;
+    opacity: 0;
 }
 .links-byline {
   font-size: 30px;