initial commit

Author: stutrek

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,46 @@
+# Scrollmonitor Parallax
+
+## Installation
+
+```
+npm install -S scrollmonitor-parallax
+```
+
+## Basic Usage
+
+```javascript
+var parallax = require('scrollmonitor-parallax');
+var eases = require('eases'); // https://github.com/mattdesl/eases
+
+
+// Create a root element. Parallax will start when this
+// element enters the viewport and stop when it exits.
+var parallaxRoot = parallax.create(domElement);
+
+// to make an element scroll at a speed relative to the
+// scroll parent, just add a value for speed.
+var parallaxChild2 = parallaxRoot.add(domElement, 0.5);
+
+// for more complex animations you can start and end positions.
+// If it's left blank, the start position is taken from the element's CSS.
+var parallaxChild = parallaxRoot.add(
+ domElement, {
+ start: {
+	opacity: 0
+}
+ end: {
+ x: 100,
+ y: 50,
+ z: 100,
+ opacity: 0.7
+ },
+ easing: {
+ x: eases.linear,
+ y: eases.linear,
+ z: eases.circIn,
+ opacity: eases.bounceIn
+ }
+ }
+);
+
+```

index.js

@@ -0,0 +1,96 @@
+(function( factory ) {
+if (typeof define !== 'undefined' && define.amd) {
+define(['scrollmonitor'], factory);
+} else if (typeof module !== 'undefined' && module.exports) {
+module.exports = factory(require('scrollmonitor'));
+} else {
+window.parallax = factory(window.scrollMonitor);
+}
+})(function (scrollMonitor) {
+
+function SpeedParallax (element, speed) {
+this.speed = speed;
+this.element = element;
+}
+
+SpeedParallax.prototype.handleScroll = function (ratio, distance) {
+var pixels = distance * this.speed;
+this.element.style.transform = 'translateY(' + pixels + 'px)';
+};
+
+function OptionsParallax (element, options) {
+this.options = options;
+this.element = element;
+}
+
+OptionsParallax.prototype.handleScroll = function (ratio) {
+var transformString = 'translate3D(';
+if (this.options.end.x) {
+transformString += (this.options.end.x * ratio) + 'px,';
+} else {
+transformString += '0px,';
+}
+if (this.options.end.y) {
+transformString += (this.options.end.y * ratio) + 'px,';
+} else {
+transformString += '0px,';
+}
+if (this.options.end.z) {
+transformString += (this.options.end.z * ratio) + 'px)';
+} else {
+transformString += '0px)';
+}
+
+if (this.options.end.rotate) {
+transformString += ' rotate(' + (this.options.end.rotate * ratio) + 'deg)';
+}
+
+this.element.style.transform = transformString;
+};
+
+function Root (element, offsets) {
+this.watcher = scrollMonitor.create(element, offsets);
+this.items = [];
+
+this.pxThru = 0;
+this.ratio = 0;
+
+var self = this;
+
+function handleScroll () {
+var start = Math.max(0, self.watcher.top - scrollMonitor.viewportHeight);
+var end = Math.min(self.watcher.bottom, scrollMonitor.documentHeight - scrollMonitor.viewportHeight);
+
+self.pxThru = Math.max(0, scrollMonitor.viewportTop - start);
+self.ratio = self.pxThru / (end - start);
+
+for (var i=0; i < self.items.length; i++) {
+self.items[i].handleScroll.call(self.items[i], self.ratio, self.pxThru);
+}
+}
+
+this.watcher.enterViewport(function () {
+window.addEventListener('scroll', handleScroll);
+});
+this.watcher.exitViewport(function () {
+window.removeEventListener('scroll', handleScroll);
+});
+}
+
+Root.prototype.add = function add (element, optionsOrSpeed) {
+var newItem;
+if (typeof optionsOrSpeed === 'number') {
+newItem = new SpeedParallax(element, optionsOrSpeed);
+} else {
+newItem = new OptionsParallax(element, optionsOrSpeed);
+}
+
+this.items.push(newItem);
+};
+
+return {
+create: function (item, offsets) {
+return new Root(item, offsets);
+}
+};
+});

package.json

@@ -0,0 +1,30 @@
+{
+ "name": "scrollmonitor-parallax",
+ "version": "0.0.0",
+ "description": "A simple parallax API",
+ "main": "index.js",
+ "directories": {
+ "test": "tests"
+ },
+ "dependencies": {
+ "scrollmonitor": "^1.0.13"
+ },
+ "devDependencies": {},
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/stutrek/scrollmonitor-parallax.git"
+ },
+ "keywords": [
+ "scrolling",
+ "parallax"
+ ],
+ "author": "Stu Kabakoff <sakabako@gmail.com>",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/stutrek/scrollmonitor-parallax/issues"
+ },
+ "homepage": "https://github.com/stutrek/scrollmonitor-parallax#readme"
+}

tests/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+<title>ScrollMonitor Parallax</title>
+<style type="text/css">
+#container {
+background-color: silver;
+height: 3000px;
+width: 700px;
+margin: 0 auto;
+position: relative;
+overflow: hidden;
+}
+
+#speedy {
+position: absolute;
+top: 10px;
+left: 100px;
+width: 200px;
+height: 100px;
+text-align: center;
+background-color: white;
+}
+#custom {
+position: absolute;
+top: 10px;
+left: 400px;
+width: 200px;
+height: 100px;
+text-align: center;
+background-color: white;
+}
+</style>
+</head>
+<body>
+<h1>ScrollMonitor Parallax Test Page</h1>
+<div id="container">
+<div id="speedy"><i>SPEEDY!!</i></div>
+<div id="custom"><i>Custom</i></div>
+</div>
+<script src="/node_modules/scrollmonitor/scrollMonitor.js"></script>
+<script src="/index.js"></script>
+<script>
+/*eslint-disable */
+var root = parallax.create(document.getElementById('container'));
+
+root.add(document.getElementById('speedy'), 2);
+
+root.add(document.getElementById('custom'), {
+end: {
+y: 2880,
+rotate: 720
+}
+});
+
+</script>
+</body>
+</html>