Merge pull request #4 from dominikmatt/develop

Example and Documentation

.gitignore

@@ -1,2 +1,5 @@
 .*
-!.gitignore
+!.gitignore
+bower_components/
+compass/
+node_modules/

README.md

@@ -1 +1,12 @@
-# one-page-scroller.js
+# one-page-scroller.js
+===============
+
+USAGE
+=============================
+
+1.) Include **src/scroller.js**
+2.) create section
+```
+
+```
+

bower.json

@@ -18,5 +18,8 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "devDependencies": {
+    "jquery": "~1.12.1"
+  }
 }

examples/assets/css/example.css

@@ -0,0 +1,35 @@
+* {
+  margin: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+.navigation-container {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #2e2e2e;
+  text-align: center;
+}
+
+.navigation-item {
+  font-size: 18px;
+  line-height: 45px;
+  color: #fff;
+  padding: 0 20px;
+}
+.navigation-item.active {
+  color: #3bbfce;
+}
+
+.content {
+  height: 100%;
+  text-align: center;
+}
+.content .animate-image {
+  opacity: 0;
+}

examples/assets/js/example-animation-animations.js

@@ -0,0 +1,66 @@
+var Animations = function() {
+    var $sectionTwo = $('#two-section');
+
+    /**
+     * @method animate
+     *
+     * @author Dominik Matt <dma@massiveart.com>
+     *
+     * @param event
+     * @param $el
+     * @param section
+     * @param posWinTop
+     * @param posTop
+     * @param lastPos
+     * @param diff
+     * @param direction
+     */
+    this.animate = function animate(event, $el, section, posWinTop, posTop, lastPos, diff, direction) {
+        switch (section) {
+            case 'one':
+            case 'two':
+                sectionTwoAnimation(event, $el, section, posWinTop, posTop, lastPos, diff, direction);
+                break;
+        }
+    };
+
+    /**
+     * @mehtod sectionTwoAnimation
+     * @param event
+     * @param $section
+     * @param posWinTop
+     * @param posTop
+     * @param lastPos
+     * @param diff
+     * @param direction
+     */
+    var sectionTwoAnimation = function sectionTwoAnimation(event, $section, posWinTop, posTop, lastPos, diff, direction) {
+        var animStart = $sectionTwo.offset().top + $sectionTwo.height() / 2 - example.scroller.$window.height();
+        var animHide = $sectionTwo.offset().top + $sectionTwo.height() / 2 - 20 - example.scroller.$window.height();
+
+        example.scroller.getSingleAnimation("sectionTwoAnimation", animStart, animHide, direction,
+            //on scroll down
+            function(done) {
+                var $img = $sectionTwo.find('.animate-image');
+
+                $img
+                    .stop()
+                    .animate({
+                        opacity: 1
+                    }, 700, done);
+            //on scroll up
+            }, function(done) {
+                var $img = $sectionTwo.find('.animate-image');
+
+                $img
+                    .stop()
+                    .animate({
+                        opacity: 0
+                    }, 700);
+                done();
+            //on initialize
+            }, function(done) {
+                done();
+            });
+    };
+};

examples/assets/js/example-animation.js

@@ -0,0 +1,21 @@
+var Example = function() {
+    this.scroller = null;
+    this.animations = new Animations();
+    this.initialize();
+};
+
+Example.prototype.initialize = function() {
+    this.scroller = new Scroller({
+        navigationContainerSelector: '#navigation',
+        contentSelector: '.content',
+        sections: {}
+    });
+
+    this.bindEvents();
+};
+
+Example.prototype.bindEvents = function() {
+    this.scroller.$document.on("scroller:section:scroll", this.animations.animate.bind(this));
+};
+
+var example = new Example();

examples/assets/js/example-url.js

@@ -0,0 +1,21 @@
+var Example = function() {
+    this.scroller = null;
+
+    this.initialize();
+};
+
+Example.prototype.initialize = function() {
+    this.scroller = new Scroller({
+        navigationContainerSelector: '#navigation',
+        contentSelector: '.content',
+
+        sections: {}
+    });
+};
+
+Example.prototype.bindEvents = function() {
+    this.scroller.$document.on("scroller:section:enter", function() { console.log('on pageview'); });
+};
+
+
+var example = new Example();

examples/assets/scss/example.scss

@@ -0,0 +1,37 @@
+* {
+    margin: 0;
+}
+
+html, body {
+    height: 100%;
+}
+
+.navigation-container {
+    position: fixed;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #2e2e2e;
+    text-align: center;
+}
+
+.navigation-item {
+    font-size: 18px;
+    line-height: 45px;
+    color: #fff;
+    padding: 0 20px;
+
+    &.active {
+        color: #3bbfce;
+    }
+}
+
+.content {
+    height: 100%;
+    text-align: center;
+
+    .animate-image {
+        opacity: 0;
+    }
+}

examples/example-animation.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>one-page-Scroller.js Example Animation</title>
+    <link rel="stylesheet" href="/examples/assets/css/example.css" type="text/css" />
+</head>
+<body>
+<nav class="navigation-container" id="navigation">
+    <a href="#" onclick="example.scroller.scrollTo('intro'); return false;" class="section-nav-intro navigation-item">Intro</a> <!-- add class "section-nav-{section-name} -->
+    <a href="#" onclick="example.scroller.scrollTo('one'); return false;" class="section-nav-one navigation-item">Section One</a>
+    <a href="#" onclick="example.scroller.scrollTo('two'); return false;" class="section-nav-two navigation-item">Section Two</a>
+    <a href="#" onclick="example.scroller.scrollTo('three'); return false;" class="section-nav-three navigation-item">Section Three</a>
+</nav>
+
+<!-- SECTION INTRO -->
+<article class="content" id="intro-section" data-section-url="intro" data-distance="0">
+    <h1>SECTION INTRO</h1>
+</article>
+
+<!-- SECTION ONE -->
+<article class="content" id="one-section" data-section-url="one" data-distance="-45"> <!-- distance == headerheight -->
+    <h1>SECTION ONE</h1>
+</article>
+
+<!-- SECTION TWO -->
+<article class="content" id="two-section" data-section-url="two" data-distance="-45"> <!-- distance == headerheight -->
+    <h1>SECTION TWO</h1>
+    <div class="image-container">
+        <img class="animate-image" src="http://lorempixel.com/400/200/" />
+    </div>
+</article>
+
+<!-- SECTION THREE -->
+<article class="content" id="three-section" data-section-url="three" data-distance="-45"> <!-- distance == headerheight -->
+    <h1>SECTION THREE</h1>
+</article>
+
+<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<script type="text/javascript" src="/src/scroller.js"></script>
+<script type="text/javascript" src="/examples/assets/js/example-animation-animations.js"></script>
+<script type="text/javascript" src="/examples/assets/js/example-animation.js"></script>
+</body>
+</html>

examples/example-url.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>one-page-Scroller.js Example URL</title>
+    <link rel="stylesheet" href="/examples/assets/css/example.css" type="text/css" />
+</head>
+<body>
+    <nav class="navigation-container" id="navigation">
+        <a href="#" onclick="example.scroller.scrollTo('intro'); return false;" class="section-nav-intro navigation-item">Intro</a> <!-- add class "section-nav-{section-name} -->
+        <a href="#" onclick="example.scroller.scrollTo('one'); return false;" class="section-nav-one navigation-item">Section One</a>
+        <a href="#" onclick="example.scroller.scrollTo('two'); return false;" class="section-nav-two navigation-item">Section Two</a>
+        <a href="#" onclick="example.scroller.scrollTo('three'); return false;" class="section-nav-three navigation-item">Section Three</a>
+    </nav>
+
+    <!-- SECTION INTRO -->
+    <article class="content" id="intro-section" data-section-url="intro" data-distance="0">
+        <h1>SECTION INTRO</h1>
+    </article>
+
+    <!-- SECTION ONE -->
+    <article class="content" id="one-section" data-section-url="one" data-distance="-45"> <!-- distance == headerheight -->
+        <h1>SECTION ONE</h1>
+    </article>
+
+    <!-- SECTION TWO -->
+    <article class="content" id="two-section" data-section-url="two" data-distance="-45"> <!-- distance == headerheight -->
+        <h1>SECTION TWO</h1>
+    </article>
+
+    <!-- SECTION THREE -->
+    <article class="content" id="three-section" data-section-url="three" data-distance="-45"> <!-- distance == headerheight -->
+        <h1>SECTION THREE</h1>
+    </article>
+
+<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<script type="text/javascript" src="/src/scroller.js"></script>
+<script type="text/javascript" src="/examples/assets/js/example-url.js"></script>
+</body>
+</html>

gulpfile.js

@@ -0,0 +1,27 @@
+var gulp = require('gulp');
+var connect = require('gulp-connect');
+var compass = require('gulp-compass');
+var path = require('path');
+var watch = require('gulp-watch');
+
+gulp.task('connect', function() {
+    connect.server({
+        port: 8888
+    });
+});
+
+gulp.task('compass', function() {
+    gulp.src('./examples/assets/scss/*.scss')
+        .pipe(compass({
+            project: path.join(__dirname, 'examples/assets'),
+            css: 'css',
+            sass: 'scss'
+        }))
+        .pipe(gulp.dest('.examples/assets/css'));
+});
+
+gulp.task('watch', function () {
+    return gulp.watch('./examples/assets/scss/**/*.scss', ['compass']);
+});
+
+gulp.task('default', ['connect', 'watch']);

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "one-page-scroller.js",
+  "version": "0.1.1",
+  "description": "===============",
+  "main": "src/scroller.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dominikmatt/one-page-scroller.js.git"
+  },
+  "author": "Dominik Matt <mail@matt-dominik.at>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/dominikmatt/one-page-scroller.js/issues"
+  },
+  "homepage": "https://github.com/dominikmatt/one-page-scroller.js#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-compass": "^2.1.0",
+    "gulp-connect": "^3.1.0",
+    "gulp-watch": "^4.3.5"
+  }
+}

src/scroller.js

@@ -2,11 +2,10 @@ var Scroller = function(options) {
     this.$document = $(document);
     this.$window = $(window);
     this.$el = $('html, body');
-    this.$nav = $('#navigation');
-    this.$sections = $('.content-section');
+    this.$nav = $(options.navigationContainerSelector);
+    this.$sections = $(options.contentSelector);
     this.selectedSection = '';
-    this.$lastSection = $('#intro-section');
-    this.$section = $('#intro-section');
+    this.$section = this.$sections.first();
     this.lastSection = '';
     this.sectionPosTop = 0;
     this.sectionLastPosTop = 0;
@@ -143,7 +142,7 @@ var Scroller = function(options) {
      */
     var handleTransform = function handleTransform(selector) {
         if (this.transforms[selector]) {
-            this.transforms[selector](this.$section, this.$lastSection);
+            this.transforms[selector](this.$section);
         }
     }.bind(this);
 
@@ -165,7 +164,7 @@ var Scroller = function(options) {
                 break;
             default:
             case 'selector':
-                var $el = $('.' + section + '-section');
+                var $el = $('#' + section + '-section');
                 var pos;
                 var distance;