simplify code, add opacity

Author: stutrek

index.js

@@ -18,7 +18,11 @@
 this.element.style.transform = 'translateY(' + pixels + 'px)';
 };
 
-function getNumber (start, end, easing, ratio) {
+function getNumber (field, options, ratio) {
+var easing = options.easing[field];
+var start = options.start[field];
+var end = options.end[field];
+
 if (easing) {
 ratio = easing(ratio);
 }
@@ -46,54 +50,33 @@
 OptionsParallax.prototype.handleScroll = function (ratio) {
 var transformString = 'translate3D(';
 if (this.options.end.x) {
-transformString += getNumber(
-this.options.start.x,
-this.options.end.x,
-this.options.easing.x,
-ratio
-) + 'px,';
+transformString += getNumber('x', this.options, ratio) + 'px,';
 } else {
 transformString += '0px,';
 }
 if (this.options.end.y) {
-transformString += getNumber(
-this.options.start.y,
-this.options.end.y,
-this.options.easing.y,
-ratio
-) + 'px,';
+transformString += getNumber('y', this.options, ratio) + 'px,';
 } else {
 transformString += '0px,';
 }
 if (this.options.end.z) {
-transformString += getNumber(
-this.options.start.z,
-this.options.end.z,
-this.options.easing.z,
-ratio
-) + 'px)';
+transformString += getNumber('z', this.options, ratio) + 'px)';
 } else {
 transformString += '0px)';
 }
 
 if (this.options.end.rotate) {
-transformString += ' rotate(' + getNumber(
-this.options.start.rotate,
-this.options.end.rotate,
-this.options.easing.rotate,
-ratio
-) + 'deg)';
+transformString += ' rotate(' + getNumber('rotate', this.options, ratio) + 'deg)';
 }
 
 if (this.options.end.scale) {
-transformString += ' scale(' + getNumber(
-this.options.start.scale,
-this.options.end.scale,
-this.options.easing.rotate,
-ratio
-) + ')';
+transformString += ' scale(' + getNumber('scale', this.options, ratio) + ')';
 }
 this.element.style.transform = transformString;
+
+if (this.options.end.opacity) {
+this.element.style.opacity = getNumber('opacity', this.options, ratio);
+}
 };
 
 function Root (element, offsets) {

tests/index.html

@@ -12,12 +12,22 @@
 overflow: hidden;
 }
 
+#outside {
+position: fixed;
+top: 10px;
+left: 10px;
+width: 200px;
+text-align: center;
+background-color: black;
+color: white;
+opacity: 0;
+}
+
 #speedy {
 position: absolute;
 top: 10px;
 left: 100px;
 width: 200px;
-height: 280px;
 text-align: center;
 background-color: white;
 }
@@ -26,7 +36,6 @@
 top: 1000px;
 left: 250px;
 width: 200px;
-height: 280px;
 text-align: center;
 background-color: white;
 }
@@ -35,7 +44,6 @@
 top: 10px;
 left: 400px;
 width: 200px;
-height: 280px;
 text-align: center;
 background-color: white;
 }
@@ -79,6 +87,10 @@ <h1>ScrollMonitor Parallax Test Page</h1>
 </pre>
 </div>
 </div>
+<div id="outside">
+I live outside the scroll container,
+but that doesn't matter.
+</div>
 <script src="/node_modules/scrollmonitor/scrollMonitor.js"></script>
 <script src="/index.js"></script>
 <script>
@@ -103,6 +115,15 @@ <h1>ScrollMonitor Parallax Test Page</h1>
 }
 });
 
+root.add(document.getElementById('outside'), {
+end: {
+opacity: 1
+},
+easing: {
+opacity: function (ratio) { return Math.sin(4.5 * ratio * Math.PI); }
+}
+});
+
 </script>
 </body>
 </html>