From 7c1778ca2cc4570f1ea57489322575f4c2ea7b12 Mon Sep 17 00:00:00 2001 From: dominikmatt Date: Thu, 3 Mar 2016 18:18:19 +0100 Subject: [PATCH] added: examples --- .gitignore | 5 +- README.md | 13 +++- bower.json | 5 +- examples/assets/css/example.css | 35 ++++++++++ .../assets/js/example-animation-animations.js | 66 +++++++++++++++++++ examples/assets/js/example-animation.js | 21 ++++++ examples/assets/js/example-url.js | 21 ++++++ examples/assets/scss/example.scss | 37 +++++++++++ examples/example-animation.html | 44 +++++++++++++ examples/example-url.html | 40 +++++++++++ gulpfile.js | 27 ++++++++ package.json | 28 ++++++++ src/scroller.js | 11 ++-- 13 files changed, 344 insertions(+), 9 deletions(-) create mode 100644 examples/assets/css/example.css create mode 100644 examples/assets/js/example-animation-animations.js create mode 100644 examples/assets/js/example-animation.js create mode 100644 examples/assets/js/example-url.js create mode 100644 examples/assets/scss/example.scss create mode 100644 examples/example-animation.html create mode 100644 examples/example-url.html create mode 100644 gulpfile.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index a40f1fd..09f8941 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ .* -!.gitignore \ No newline at end of file +!.gitignore +bower_components/ +compass/ +node_modules/ \ No newline at end of file diff --git a/README.md b/README.md index 9c5a0e7..1f68188 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ -# one-page-scroller.js \ No newline at end of file +# one-page-scroller.js +=============== + +USAGE +============================= + +1.) Include **src/scroller.js** +2.) create section +``` + +``` + diff --git a/bower.json b/bower.json index ab7528d..6dc89d9 100644 --- a/bower.json +++ b/bower.json @@ -18,5 +18,8 @@ "bower_components", "test", "tests" - ] + ], + "devDependencies": { + "jquery": "~1.12.1" + } } diff --git a/examples/assets/css/example.css b/examples/assets/css/example.css new file mode 100644 index 0000000..e31400a --- /dev/null +++ b/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; +} diff --git a/examples/assets/js/example-animation-animations.js b/examples/assets/js/example-animation-animations.js new file mode 100644 index 0000000..db4be9d --- /dev/null +++ b/examples/assets/js/example-animation-animations.js @@ -0,0 +1,66 @@ +var Animations = function() { + var $sectionTwo = $('#two-section'); + + /** + * @method animate + * + * @author Dominik Matt + * + * @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(); + }); + }; +}; diff --git a/examples/assets/js/example-animation.js b/examples/assets/js/example-animation.js new file mode 100644 index 0000000..e6c513c --- /dev/null +++ b/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(); diff --git a/examples/assets/js/example-url.js b/examples/assets/js/example-url.js new file mode 100644 index 0000000..1a93bf0 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/examples/assets/scss/example.scss b/examples/assets/scss/example.scss new file mode 100644 index 0000000..a81c9cb --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/examples/example-animation.html b/examples/example-animation.html new file mode 100644 index 0000000..ae7a081 --- /dev/null +++ b/examples/example-animation.html @@ -0,0 +1,44 @@ + + + + one-page-Scroller.js Example Animation + + + + + + +
+

SECTION INTRO

+
+ + +
+

SECTION ONE

+
+ + +
+

SECTION TWO

+
+ +
+
+ + +
+

SECTION THREE

+
+ + + + + + + + \ No newline at end of file diff --git a/examples/example-url.html b/examples/example-url.html new file mode 100644 index 0000000..5f43642 --- /dev/null +++ b/examples/example-url.html @@ -0,0 +1,40 @@ + + + + one-page-Scroller.js Example URL + + + + + + +
+

SECTION INTRO

+
+ + +
+

SECTION ONE

+
+ + +
+

SECTION TWO

+
+ + +
+

SECTION THREE

+
+ + + + + + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..b3be3b3 --- /dev/null +++ b/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']); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..0a62c74 --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/src/scroller.js b/src/scroller.js index a45540d..8c9c0ed 100644 --- a/src/scroller.js +++ b/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;