From f769ac1f9206a0f3199b90bd0b36caf0d8cd3e44 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Thu, 16 Jan 2014 09:39:12 -0800 Subject: [PATCH 01/21] scrollReveal.js initial commit --- README.md | 92 +++++++++++++++ index.html | 52 +++++++++ scrollReveal.js | 299 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 443 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 scrollReveal.js diff --git a/README.md b/README.md new file mode 100644 index 00000000..50fe39a3 --- /dev/null +++ b/README.md @@ -0,0 +1,92 @@ +#scrollReveal.js +####Declarative CSS3 transitions on scroll. +A simple way to create and maintain how your elements reveal, triggered when your element(s) enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) + +> ***Disclaimer:** This is a brand new project and still under active development. Please bare in mind that this plug-in will be updated frequently, and that breaking changes are virtually guaranteed in the next couple iterations. + +##1. Installation +Please download `scrollReveal.js` into your JavaScript folder, and reference it just after the closing `` tag. It will automatically instantiate itself ready-to-go when the event `DOMContentReady` fires. + + +``` + // Everything else + // ... + + + +``` + +>**NOTE:** scrollReveal.js does not require jQuery, but *does* rely upon CSS3 transitions; it has been developed exclusively for modern browser use only. + + +##2. Usage +By adding a `data-scrollreveal` attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport.

**Fig 1**: + +``` +

Welcome Traveler

+``` +However, scrollReveal.js allows you to describe custom reveal behavior, using *natural language*.

**Fig 2**: +``` +

Welcome

+

Hello

+ +``` + + + +###2.1 Keywords +Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific keywords: **tokens** that expect to be followed by a **value**, and semantic **fillers** that facilitate the use of more natural language. + +####2.1.1 Tokens +These words describe the reveal behavior, using **keyword** / **value** pairs. + +--- + +- **Enter** — Controls the direction of your element transition. Whatever value is passed is considered the vector origin. For example, specifying `top` will reveal your element with a downward motion. + * Accepted value: `top`, `right`, `bottom` or `left` + +--- + +- **Move** — The distance your element will travel during transition. + * Accepted value: **[ integer ] px** →(eg. `move 33px`) + +--- + +- **Over** — The duration of your element’s transition. + * Accepted value: **[ decminal ] s** → (eg. `over 1.66s`) + +--- + +- **After/Wait** — The delay before your element beings its transition. + * Accepted value: **[ decminal ] s** → (eg. `after 0.33s` or `wait 0.33s`) + +--- + +#### 2.1.2 Fillers +While **keywords** must be followed by an appropriate accepted **value**, the use of conjoining **fillers** are permitted for more natural language. These are shown below: + +- `from` +- `the` +- `and` +- `then` +- `but` + +**Fig 3**: +``` + +
Example 1
+
Example 1
+ + +
Example 2
+
Example 2
+``` + +### 3. Contributions / Thanks! +I noticed a number of clients requesting CSS3 transitions on scroll for various site elements, so I created this little vanilla JavaScript helper plug-in to help out. Many thanks to Codrops, Mary Lou and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, Codrops. + +#####**If you’d like to contribute, please feel free!** + +© 2014 Julian Lloyd +Licensed under the MIT license. +[http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php) diff --git a/index.html b/index.html new file mode 100644 index 00000000..7397d6db --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + scrollReveal.js + + + + +
Default
+
Enter Top and Move 25px
+
Enter Bottom Over 1s
+
Enter Left and Move 25px
+
Enter Right Over 1s
+ +
+ +
Default
+
Enter Top and Move 25px
+
Enter Bottom Over 1s
+
Enter Left and Move 25px
+
Enter Right Over 1s
+ +
+ + +
Default
+
Enter Top and Move 25px
+
Enter Bottom Over 1s
+
Enter Left and Move 25px
+
Enter Right Over 1s
+ +
+ + + + + \ No newline at end of file diff --git a/scrollReveal.js b/scrollReveal.js new file mode 100644 index 00000000..b502efed --- /dev/null +++ b/scrollReveal.js @@ -0,0 +1,299 @@ +/* + _ _ _____ _ _ + | | | __ \ | | (_) + ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ + / __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| + \__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ + |___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ + _/ | + |__/ + + "Declarative CSS3 transitions on scroll." + +/*============================================================================= + + scrollReveal.js is inspired by cbpScroller.js, © 2014, Codrops. + + Licensed under the MIT license. + http://www.opensource.org/licenses/mit-license.php + + scrollReveal.js, © 2014 http://julianlloyd.me + +=============================================================================*/ + +;(function (window) { + + 'use strict'; + + var docElem = window.document.documentElement; + + function getViewportH () { + var client = docElem['clientHeight'], + inner = window['innerHeight']; + + return (client < inner) ? inner : client; + } + + function getOffset (el) { + var offsetTop = 0, + offsetLeft = 0; + + do { + if (!isNaN(el.offsetTop)) { + offsetTop += el.offsetTop; + } + if (!isNaN(el.offsetLeft)) { + offsetLeft += el.offsetLeft; + } + } while (el = el.offsetParent) + + return { + top: offsetTop, + left: offsetLeft + } + } + + function isElementInViewport (el, h) { + var scrolled = window.pageYOffset, + viewed = scrolled + getViewportH(), + elH = el.offsetHeight, + elTop = getOffset(el).top, + elBottom = elTop + elH, + h = h || 0; + + return (elTop + elH * h) <= viewed && (elBottom) >= scrolled; + } + + function extend (a, b) { + for (var key in b) { + if (b.hasOwnProperty(key)) { + a[key] = b[key]; + } + } + return a; + } + + + function scrollReveal(options) { + this.options = extend(this.defaults, options); + this._init(); + } + + + + scrollReveal.prototype = { + defaults: { + axis: 'y', + distance: '25px', + duration: '0.66s', + delay: '0s', + + // if 0, the element is considered in the viewport as soon as it enters + // if 1, the element is considered in the viewport when it's fully visible + viewportFactor: 0.33 + }, + + /*=============================================================================*/ + + _init: function () { + + var self = this; + + this.elems = Array.prototype.slice.call(docElem.querySelectorAll('[data-scrollReveal]')); + this.scrolled = false; + + // Initialize all scrollreveals, triggering all + // reveals on visible elements. + this.elems.forEach(function (el, i) { + self.animate(el); + }); + + var scrollHandler = function () { + if (!self.scrolled) { + self.scrolled = true; + setTimeout(function () { + self._scrollPage(); + }, 60); + } + }; + + var resizeHandler = function () { + function delayed() { + self._scrollPage(); + self.resizeTimeout = null; + } + if (self.resizeTimeout) { + clearTimeout(self.resizeTimeout); + } + self.resizeTimeout = setTimeout(delayed, 200); + }; + + window.addEventListener('scroll', scrollHandler, false); + window.addEventListener('resize', resizeHandler, false); + }, + + /*=============================================================================*/ + + _scrollPage: function () { + var self = this; + + this.elems.forEach(function (el, i) { + if (isElementInViewport(el, self.options.viewportFactor)) { + self.animate(el); + } + }); + this.scrolled = false; + }, + + /*=============================================================================*/ + + parseLanguage: function (el) { + + // Splits on a sequence of one or more commas, periods or spaces. + var words = el.getAttribute('data-scrollreveal').split(/[,. ]+/), + enterFrom, + parsed = {}; + + function filter (words) { + var ret = [], + + blacklist = [ + "from", + "the", + "and", + "then", + "but" + ]; + + words.forEach(function (word, i) { + if (blacklist.indexOf(word) > -1) { + return; + } + ret.push(word); + }); + + return ret; + } + + words = filter(words); + + words.forEach(function (word, i) { + + switch (word) { + case "enter": + enterFrom = words[i + 1]; + + if (enterFrom == "top" || enterFrom == "bottom") { + parsed.axis = "y"; + } + + if (enterFrom == "left" || enterFrom == "right") { + parsed.axis = "x"; + } + + break; + + case "after": + parsed.delay = words[i + 1]; + break; + + case "wait": + parsed.delay = words[i + 1]; + break; + + case "move": + parsed.distance = words[i + 1]; + break; + + case "over": + parsed.duration = words[i + 1]; + break; + + case "trigger": + parsed.eventName = words[i + 1]; + break; + + default: + // Unrecognizable words; do nothing. + break; + } + }); + + // After all values are parsed, let’s make sure our our + // pixel distance is negative for top and left entrances. + // + // ie. "move 25px from top" starts at 'top: -25px' in CSS. + + if (enterFrom == "top" || enterFrom == "left") { + + if (!typeof parsed.distance == "undefined") { + parsed.distance = "-" + parsed.distance; + } + + else { + parsed.distance = "-" + this.options.distance; + } + + } + + return parsed; + }, + + /*=============================================================================*/ + + genCSS: function (el, axis) { + var parsed = this.parseLanguage(el); + + var dist = parsed.distance || this.options.distance, + dur = parsed.duration || this.options.duration, + delay = parsed.delay || this.options.delay, + axis = parsed.axis || this.options.axis; + + var transition = "-webkit-transition: all " + dur + " ease " + delay + ";" + + "-moz-transition: all " + dur + " ease " + delay + ";" + + "-o-transition: all " + dur + " ease " + delay + ";" + + "transition: all " + dur + " ease " + delay + ";"; + + var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + + "-moz-transform: translate" + axis + "(" + dist + ");" + + "transform: translate" + axis + "(" + dist + ");" + + "opacity: 0;"; + + var target = "-webkit-transform: translate" + axis + "(0);" + + "-moz-transform: translate" + axis + "(0);" + + "transform: translate" + axis + "(0);" + + "opacity: 1;"; + return { + transition: transition, + initial: initial, + target: target, + totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) + }; + }, + + /*=============================================================================*/ + + animate: function (el) { + var css = this.genCSS(el); + + if (!el.getAttribute('data-sr-init')) { + el.setAttribute('style', css.initial); + el.setAttribute('data-sr-init', true); + } + + if (isElementInViewport(el, this.options.viewportFactor)) { + el.setAttribute('style', css.target + css.transition); + + setTimeout(function () { + el.removeAttribute('style'); + }, css.totalDuration); + } + + }// end animate() + }; // end scrollReveal.prototype + + document.addEventListener("DOMContentLoaded", function (evt) { + window.scrollReveal = new scrollReveal(); + }); + +})(window); \ No newline at end of file From 56b5a55065f7e1396ef3f97e2964d006a8ab831e Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Thu, 16 Jan 2014 09:42:58 -0800 Subject: [PATCH 02/21] README.md updated --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 50fe39a3..d84d82b9 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ #scrollReveal.js ####Declarative CSS3 transitions on scroll. -A simple way to create and maintain how your elements reveal, triggered when your element(s) enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) +A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) -> ***Disclaimer:** This is a brand new project and still under active development. Please bare in mind that this plug-in will be updated frequently, and that breaking changes are virtually guaranteed in the next couple iterations. +> **Disclaimer:** This is a brand new project and still under active development. Please bare in mind that this plug-in will be updated frequently, and that breaking changes are virtually guaranteed in the next couple iterations. ##1. Installation Please download `scrollReveal.js` into your JavaScript folder, and reference it just after the closing `` tag. It will automatically instantiate itself ready-to-go when the event `DOMContentReady` fires. @@ -83,10 +83,12 @@ While **keywords** must be followed by an appropriate accepted **value**, the us ``` ### 3. Contributions / Thanks! -I noticed a number of clients requesting CSS3 transitions on scroll for various site elements, so I created this little vanilla JavaScript helper plug-in to help out. Many thanks to Codrops, Mary Lou and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, Codrops. +I noticed a number of clients requesting CSS3 transitions on scroll for various site elements, so I created this little vanilla JavaScript helper plug-in to help out. + +Many thanks to Codrops, Mary Lou and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, Codrops. #####**If you’d like to contribute, please feel free!** -© 2014 Julian Lloyd +© 2014 Julian Lloyd
Licensed under the MIT license. [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php) From 8926db335b2125fbe0b5493516f6ada87aaa2413 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Thu, 16 Jan 2014 10:02:14 -0800 Subject: [PATCH 03/21] scrollReveal.js initial commit --- .gitignore | 4 ++++ README.md | 10 +++++----- 2 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..ac39bdd5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +## generic files to ignore +*~ +*.lock +*.DS_Store diff --git a/README.md b/README.md index d84d82b9..20766322 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,11 @@ However, scrollReveal.js allows you to describe custom reveal behavior, using *n -###2.1 Keywords -Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific keywords: **tokens** that expect to be followed by a **value**, and semantic **fillers** that facilitate the use of more natural language. +###2.1 Token +Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific words: **keywords** that expect to be followed by a **value**, and semantic **fillers** that facilitate the use of more natural language. -####2.1.1 Tokens -These words describe the reveal behavior, using **keyword** / **value** pairs. +####2.1.1 keywords +These words describe the reveal behavior, using **keywords** / **value** pairs. --- @@ -89,6 +89,6 @@ Many thanks to Codrops, Mary Lou and the [cbpScroller.js](http://tympanus.net/co #####**If you’d like to contribute, please feel free!** -© 2014 Julian Lloyd
+© 2014 [@JulianLloyd](https://twitter.com/julianlloyd)
Licensed under the MIT license. [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php) From bbd8493a5343b7197e6aafb5396d74af2a3fedc6 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Fri, 17 Jan 2014 20:53:59 -0800 Subject: [PATCH 04/21] scrollReveal.js initial commit --- README.md | 8 ++++---- index.html | 6 +++--- scrollReveal.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 20766322..cb23ce1f 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A simple way to create and maintain how elements fade in, triggered when they en > **Disclaimer:** This is a brand new project and still under active development. Please bare in mind that this plug-in will be updated frequently, and that breaking changes are virtually guaranteed in the next couple iterations. ##1. Installation -Please download `scrollReveal.js` into your JavaScript folder, and reference it just after the closing `` tag. It will automatically instantiate itself ready-to-go when the event `DOMContentReady` fires. +Please download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate itself ready-to-go when the event `DOMContentReady` fires. ``` @@ -34,11 +34,11 @@ However, scrollReveal.js allows you to describe custom reveal behavior, using *n -###2.1 Token +###2.1 Keywords, Values and Fillers Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific words: **keywords** that expect to be followed by a **value**, and semantic **fillers** that facilitate the use of more natural language. -####2.1.1 keywords -These words describe the reveal behavior, using **keywords** / **value** pairs. +####2.1.1 Keywords and Values +These words describe the reveal behavior, using **keyword** / **value** pairs. --- diff --git a/index.html b/index.html index 7397d6db..c727a6a5 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
Default
Enter Top and Move 25px
Enter Bottom Over 1s
-
Enter Left and Move 25px
+
Enter Top and Move 25px
Enter Right Over 1s
@@ -32,7 +32,7 @@
Default
Enter Top and Move 25px
Enter Bottom Over 1s
-
Enter Left and Move 25px
+
Enter Top and Move 25px
Enter Right Over 1s
@@ -41,7 +41,7 @@
Default
Enter Top and Move 25px
Enter Bottom Over 1s
-
Enter Left and Move 25px
+
Enter Top and Move 25px
Enter Right Over 1s
diff --git a/scrollReveal.js b/scrollReveal.js index b502efed..7f687682 100644 --- a/scrollReveal.js +++ b/scrollReveal.js @@ -17,7 +17,7 @@ Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php - scrollReveal.js, © 2014 http://julianlloyd.me + scrollReveal.js, © 2014 https://twitter.com/julianlloyd =============================================================================*/ From c39edb7f7fde5e2b68c10af3203416b7e10bad27 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Mon, 20 Jan 2014 01:45:25 -0800 Subject: [PATCH 05/21] scrollReveal.js initial commit --- README.md | 43 +++--- css/style.css | 322 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 213 +++++++++++++++++++++++------- js/scrollReveal.js | 304 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 812 insertions(+), 70 deletions(-) create mode 100644 css/style.css create mode 100644 js/scrollReveal.js diff --git a/README.md b/README.md index cb23ce1f..f15543a6 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ ####Declarative CSS3 transitions on scroll. A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) -> **Disclaimer:** This is a brand new project and still under active development. Please bare in mind that this plug-in will be updated frequently, and that breaking changes are virtually guaranteed in the next couple iterations. +> **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. ##1. Installation -Please download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate itself ready-to-go when the event `DOMContentReady` fires. +Clone or download download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate ready-to-go when the `DOMContentReady` event fires. ``` @@ -23,19 +23,21 @@ Please download `scrollReveal.js` into your JavaScript folder, and reference it By adding a `data-scrollreveal` attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport.

**Fig 1**: ``` -

Welcome Traveler

+

Hello world!

``` -However, scrollReveal.js allows you to describe custom reveal behavior, using *natural language*.

**Fig 2**: +However, scrollReveal.js allows you to define custom reveal behavior, using *descriptive language*.

**Fig 2**: ``` -

Welcome

-

Hello

- +

Foo

+ +

Bar

+ + ``` ###2.1 Keywords, Values and Fillers -Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific words: **keywords** that expect to be followed by a **value**, and semantic **fillers** that facilitate the use of more natural language. +Whatever string is passed to the `data-scrollreveal` attribute is parsed for specific words: **keywords** that expect to be followed by a **value**, and semantic **fillers** that facilitate more natural language. ####2.1.1 Keywords and Values These words describe the reveal behavior, using **keyword** / **value** pairs. @@ -43,27 +45,27 @@ These words describe the reveal behavior, using **keyword** / **value** pairs. --- - **Enter** — Controls the direction of your element transition. Whatever value is passed is considered the vector origin. For example, specifying `top` will reveal your element with a downward motion. - * Accepted value: `top`, `right`, `bottom` or `left` + * Accepted value: `top`, `right`, `bottom` or `left` → (eg. `enter top`) --- - **Move** — The distance your element will travel during transition. - * Accepted value: **[ integer ] px** →(eg. `move 33px`) + * Accepted value: **[ integer ] px** → (eg. `move 33px`) --- - **Over** — The duration of your element’s transition. - * Accepted value: **[ decminal ] s** → (eg. `over 1.66s`) + * Accepted value: **[ decimal ] s** → (eg. `over 1.66s`) --- - **After/Wait** — The delay before your element beings its transition. - * Accepted value: **[ decminal ] s** → (eg. `after 0.33s` or `wait 0.33s`) + * Accepted value: **[ decimal ] s** → (eg. `after 0.33s` or `wait 0.33s`) --- #### 2.1.2 Fillers -While **keywords** must be followed by an appropriate accepted **value**, the use of conjoining **fillers** are permitted for more natural language. These are shown below: +While **keywords** must be followed by an appropriate accepted **value**, the use of conjoining **fillers** are permitted for more readable language. These are shown below: - `from` - `the` @@ -73,21 +75,20 @@ While **keywords** must be followed by an appropriate accepted **value**, the us **Fig 3**: ``` - +
Example 1
Example 1
- -
Example 2
-
Example 2
+ +
Example 2
+
Example 2
+
Example 2
``` ### 3. Contributions / Thanks! -I noticed a number of clients requesting CSS3 transitions on scroll for various site elements, so I created this little vanilla JavaScript helper plug-in to help out. - -Many thanks to Codrops, Mary Lou and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, Codrops. +I noticed a growing number of clients were requesting on-scroll CSS3 transitions for various site elements, and so scrollReveal.js was made to help with development. If you’d like to contribute—please do! -#####**If you’d like to contribute, please feel free!** +Many thanks to [@Codrops](https://twitter.com/codrops), [@Mary Lou](https://twitter.com/crnacura) and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, [Codrops](http://tympanus.net/codrops/). © 2014 [@JulianLloyd](https://twitter.com/julianlloyd)
Licensed under the MIT license. diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..1798e6bc --- /dev/null +++ b/css/style.css @@ -0,0 +1,322 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + cursor: pointer; +} + +* { + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + overflow: -moz-scrollbars-vertical; + overflow-y: scroll; +} + +h1, .h1 { + font-family: "proxima-nova", sams-serif; + font-weight: 100; +} + +html, body { + font-family: "proxima-nova", sans-serif; + font-weight: 300; +} + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +html, body { + color: white; + text-align: center; +} +@media screen and (min-width: 300px) { + html, body { + font-size: 14px; + } +} +@media screen and (min-width: 460px) { + html, body { + font-size: 20px; + } +} +@media screen and (min-width: 900px) { + html, body { + font-size: 24px; + } +} + +h1, .h1 { + line-height: 1.166; + margin: .66em 0; +} + +@media screen and (min-width: 300px) { + h1, .h1 { + font-size: 2.33em; + } +} +@media screen and (min-width: 460px) { + h1, .h1 { + font-size: 2.66em; + } +} +@media screen and (min-width: 720px) { + h1, .h1 { + font-size: 3.33em; + } +} + +p { + color: #616c84; + margin: 0.33em 0; +} + +a:link, +a:visited { + color: #35ff99; + text-decoration: none; + border-radius: 5px; + padding: 2px; +} + +a:hover, +a:active { + background: #35ff99; + color: #202a39; +} + +small { + font-size: .75em; +} + +em { + font-style: italic; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +html, body { + height: 100%; + background: #202a39; +} + +.column-container { + width: 80%; + max-width: 1000px; + margin: 0 auto; + overflow: hidden; + height: 250%; + text-align: center; +} +@media screen and (min-width: 300px) { + .column-container { + padding-top: 20%; + margin-bottom: -125px; + } +} +@media screen and (min-width: 720px) { + .column-container { + padding-top: 10%; + } +} + +.column { + width: 3%; + height: 100%; + margin: 0 2%; + display: inline-block; +} + +.block { + border-radius: 5px; + margin-bottom: 150%; +} + +.block-1x { + height: 10%; +} + +.block-2x { + height: 15%; +} + +.block-3x { + height: 20%; +} + +.block-blueberry { + background: #008597; +} + +.block-slate { + background: #2d3443; +} + +.block-grape { + background: #4d407c; +} + +.block-raspberry { + background: #ff005d; +} + +.block-mango { + background: #ffcc00; +} + +.block-orange { + background: #ff7c35; +} + +.block-kiwi { + background: #35ff99; +} + +.withLove { + overflow: hidden; + text-align: center; + padding-bottom: 2em; + cursor: default; + color: #616c84; +} +@media screen and (min-width: 900px) { + .withLove { + margin-top: 125px; + } +} +.withLove * { + display: inline-block; +} +.withLove .alpha, +.withLove .omega { + width: 40%; +} +.withLove .alpha { + text-align: right; +} +.withLove .omega { + text-align: left; +} +.withLove .heart { + margin: 0 -2px; + position: relative; + z-index: 3; + -webkit-animation: throb 1.33s ease-in-out infinite; + animation: throb 1.33s ease-in-out infinite; +} +.withLove .heart path { + fill: #ff005d; +} +@media screen and (min-width: 300px) { + .withLove .heart { + width: 30px; + height: 30px; + top: .66em; + } +} +@media screen and (min-width: 460px) { + .withLove .heart { + top: .8em; + width: 50px; + height: 50px; + } +} + +@-webkit-keyframes throb { + 0% { + -webkit-transform: scale(1); + } + + 50% { + -webkit-transform: scale(0.8); + } + + 100% { + -webkit-transform: scale(1); + } +} + +@keyframes throb { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(0.8); + } + + 100% { + transform: scale(1); + } +} diff --git a/index.html b/index.html index c727a6a5..05d920f0 100644 --- a/index.html +++ b/index.html @@ -1,52 +1,167 @@ - - - scrollReveal.js - - - - -
Default
-
Enter Top and Move 25px
-
Enter Bottom Over 1s
-
Enter Top and Move 25px
-
Enter Right Over 1s
- -
- -
Default
-
Enter Top and Move 25px
-
Enter Bottom Over 1s
-
Enter Top and Move 25px
-
Enter Right Over 1s
- -
- - -
Default
-
Enter Top and Move 25px
-
Enter Bottom Over 1s
-
Enter Top and Move 25px
-
Enter Right Over 1s
- -
- - - - + + scrollReveal.js + + + + + + + + + + + + + + + + + + Fork me on GitHub + + +

scrollReveal.js

+

Declarative on-scroll reveal animations.

+

An open-source project by @JulianLloyd

+ +
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+ +
+ Made with + + + + + + + + in California +
+ + + + + + \ No newline at end of file diff --git a/js/scrollReveal.js b/js/scrollReveal.js new file mode 100644 index 00000000..b7c1e750 --- /dev/null +++ b/js/scrollReveal.js @@ -0,0 +1,304 @@ +/* + _ _ _____ _ _ + | | | __ \ | | (_) + ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ + / __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| + \__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ + |___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ + _/ | + |__/ + + "Declarative on-scroll reveal animations." + +/*============================================================================= + + scrollReveal.js is inspired by cbpScroller.js, © 2014, Codrops. + + Licensed under the MIT license. + http://www.opensource.org/licenses/mit-license.php + + scrollReveal.js, © 2014 https://twitter.com/julianlloyd + +=============================================================================*/ + +;(function (window) { + + 'use strict'; + + var docElem = window.document.documentElement; + + function getViewportH () { + var client = docElem['clientHeight'], + inner = window['innerHeight']; + + return (client < inner) ? inner : client; + } + + function getOffset (el) { + var offsetTop = 0, + offsetLeft = 0; + + do { + if (!isNaN(el.offsetTop)) { + offsetTop += el.offsetTop; + } + if (!isNaN(el.offsetLeft)) { + offsetLeft += el.offsetLeft; + } + } while (el = el.offsetParent) + + return { + top: offsetTop, + left: offsetLeft + } + } + + function isElementInViewport (el, h) { + var scrolled = window.pageYOffset, + viewed = scrolled + getViewportH(), + elH = el.offsetHeight, + elTop = getOffset(el).top, + elBottom = elTop + elH, + h = h || 0; + + return (elTop + elH * h) <= viewed && (elBottom) >= scrolled; + } + + function extend (a, b) { + for (var key in b) { + if (b.hasOwnProperty(key)) { + a[key] = b[key]; + } + } + return a; + } + + + function scrollReveal(options) { + this.options = extend(this.defaults, options); + this._init(); + } + + + + scrollReveal.prototype = { + defaults: { + axis: 'y', + distance: '25px', + duration: '0.66s', + delay: '0s', + + // if 0, the element is considered in the viewport as soon as it enters + // if 1, the element is considered in the viewport when it's fully visible + viewportFactor: 0.33 + }, + + /*=============================================================================*/ + + _init: function () { + + var self = this; + + this.elems = Array.prototype.slice.call(docElem.querySelectorAll('[data-scrollReveal]')); + this.scrolled = false; + + // Initialize all scrollreveals, triggering all + // reveals on visible elements. + this.elems.forEach(function (el, i) { + self.animate(el); + }); + + var scrollHandler = function () { + if (!self.scrolled) { + self.scrolled = true; + setTimeout(function () { + self._scrollPage(); + }, 60); + } + }; + + var resizeHandler = function () { + function delayed() { + self._scrollPage(); + self.resizeTimeout = null; + } + if (self.resizeTimeout) { + clearTimeout(self.resizeTimeout); + } + self.resizeTimeout = setTimeout(delayed, 200); + }; + + window.addEventListener('scroll', scrollHandler, false); + window.addEventListener('resize', resizeHandler, false); + }, + + /*=============================================================================*/ + + _scrollPage: function () { + var self = this; + + this.elems.forEach(function (el, i) { + if (isElementInViewport(el, self.options.viewportFactor)) { + self.animate(el); + } + }); + this.scrolled = false; + }, + + /*=============================================================================*/ + + parseLanguage: function (el) { + + // Splits on a sequence of one or more commas, periods or spaces. + var words = el.getAttribute('data-scrollreveal').split(/[, ]+/), + enterFrom, + parsed = {}; + + function filter (words) { + var ret = [], + + blacklist = [ + "from", + "the", + "and", + "then", + "but" + ]; + + words.forEach(function (word, i) { + if (blacklist.indexOf(word) > -1) { + return; + } + ret.push(word); + }); + + return ret; + } + + words = filter(words); + + words.forEach(function (word, i) { + + switch (word) { + case "enter": + enterFrom = words[i + 1]; + + if (enterFrom == "top" || enterFrom == "bottom") { + parsed.axis = "y"; + } + + if (enterFrom == "left" || enterFrom == "right") { + parsed.axis = "x"; + } + + return; + + case "after": + parsed.delay = words[i + 1]; + return; + + case "wait": + parsed.delay = words[i + 1]; + return; + + case "move": + parsed.distance = words[i + 1]; + return; + + case "over": + parsed.duration = words[i + 1]; + return; + + case "trigger": + parsed.eventName = words[i + 1]; + return; + + default: + // Unrecognizable words; do nothing. + return; + } + }); + + // After all values are parsed, let’s make sure our our + // pixel distance is negative for top and left entrances. + // + // ie. "move 25px from top" starts at 'top: -25px' in CSS. + + if (enterFrom == "top" || enterFrom == "left") { + + if (!typeof parsed.distance == "undefined") { + parsed.distance = "-" + parsed.distance; + } + + else { + parsed.distance = "-" + this.options.distance; + } + + } + + return parsed; + }, + + /*=============================================================================*/ + + genCSS: function (el, axis) { + var parsed = this.parseLanguage(el); + + var dist = parsed.distance || this.options.distance, + dur = parsed.duration || this.options.duration, + delay = parsed.delay || this.options.delay, + axis = parsed.axis || this.options.axis; + + var transition = "-webkit-transition: all " + dur + " ease " + delay + ";" + + "-moz-transition: all " + dur + " ease " + delay + ";" + + "-o-transition: all " + dur + " ease " + delay + ";" + + "transition: all " + dur + " ease " + delay + ";"; + + var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + + "-moz-transform: translate" + axis + "(" + dist + ");" + + "transform: translate" + axis + "(" + dist + ");" + + "opacity: 0;"; + + var target = "-webkit-transform: translate" + axis + "(0);" + + "-moz-transform: translate" + axis + "(0);" + + "transform: translate" + axis + "(0);" + + "opacity: 1;"; + return { + transition: transition, + initial: initial, + target: target, + totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) + }; + }, + + /*=============================================================================*/ + + animate: function (el) { + var css = this.genCSS(el); + + if (!el.getAttribute('data-sr-init')) { + el.setAttribute('style', css.initial); + el.setAttribute('data-sr-init', true); + } + + if (el.getAttribute('data-sr-complete')) { + return; + } + + if (isElementInViewport(el, this.options.viewportFactor)) { + el.setAttribute('style', css.target + css.transition); + + setTimeout(function () { + el.removeAttribute('style'); + el.setAttribute('data-sr-complete', true); + }, css.totalDuration); + } + + } + }; // end scrollReveal.prototype + + document.addEventListener("DOMContentLoaded", function (evt) { + window.scrollReveal = new scrollReveal(); + }); + +})(window); \ No newline at end of file From 146e1cb578b01600a115046b8ec149062df2650d Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Mon, 20 Jan 2014 01:47:00 -0800 Subject: [PATCH 06/21] scrollReveal.js initial commit --- scrollReveal.js | 299 ------------------------------------------------ 1 file changed, 299 deletions(-) delete mode 100644 scrollReveal.js diff --git a/scrollReveal.js b/scrollReveal.js deleted file mode 100644 index 7f687682..00000000 --- a/scrollReveal.js +++ /dev/null @@ -1,299 +0,0 @@ -/* - _ _ _____ _ _ - | | | __ \ | | (_) - ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ - / __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| - \__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ - |___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ - _/ | - |__/ - - "Declarative CSS3 transitions on scroll." - -/*============================================================================= - - scrollReveal.js is inspired by cbpScroller.js, © 2014, Codrops. - - Licensed under the MIT license. - http://www.opensource.org/licenses/mit-license.php - - scrollReveal.js, © 2014 https://twitter.com/julianlloyd - -=============================================================================*/ - -;(function (window) { - - 'use strict'; - - var docElem = window.document.documentElement; - - function getViewportH () { - var client = docElem['clientHeight'], - inner = window['innerHeight']; - - return (client < inner) ? inner : client; - } - - function getOffset (el) { - var offsetTop = 0, - offsetLeft = 0; - - do { - if (!isNaN(el.offsetTop)) { - offsetTop += el.offsetTop; - } - if (!isNaN(el.offsetLeft)) { - offsetLeft += el.offsetLeft; - } - } while (el = el.offsetParent) - - return { - top: offsetTop, - left: offsetLeft - } - } - - function isElementInViewport (el, h) { - var scrolled = window.pageYOffset, - viewed = scrolled + getViewportH(), - elH = el.offsetHeight, - elTop = getOffset(el).top, - elBottom = elTop + elH, - h = h || 0; - - return (elTop + elH * h) <= viewed && (elBottom) >= scrolled; - } - - function extend (a, b) { - for (var key in b) { - if (b.hasOwnProperty(key)) { - a[key] = b[key]; - } - } - return a; - } - - - function scrollReveal(options) { - this.options = extend(this.defaults, options); - this._init(); - } - - - - scrollReveal.prototype = { - defaults: { - axis: 'y', - distance: '25px', - duration: '0.66s', - delay: '0s', - - // if 0, the element is considered in the viewport as soon as it enters - // if 1, the element is considered in the viewport when it's fully visible - viewportFactor: 0.33 - }, - - /*=============================================================================*/ - - _init: function () { - - var self = this; - - this.elems = Array.prototype.slice.call(docElem.querySelectorAll('[data-scrollReveal]')); - this.scrolled = false; - - // Initialize all scrollreveals, triggering all - // reveals on visible elements. - this.elems.forEach(function (el, i) { - self.animate(el); - }); - - var scrollHandler = function () { - if (!self.scrolled) { - self.scrolled = true; - setTimeout(function () { - self._scrollPage(); - }, 60); - } - }; - - var resizeHandler = function () { - function delayed() { - self._scrollPage(); - self.resizeTimeout = null; - } - if (self.resizeTimeout) { - clearTimeout(self.resizeTimeout); - } - self.resizeTimeout = setTimeout(delayed, 200); - }; - - window.addEventListener('scroll', scrollHandler, false); - window.addEventListener('resize', resizeHandler, false); - }, - - /*=============================================================================*/ - - _scrollPage: function () { - var self = this; - - this.elems.forEach(function (el, i) { - if (isElementInViewport(el, self.options.viewportFactor)) { - self.animate(el); - } - }); - this.scrolled = false; - }, - - /*=============================================================================*/ - - parseLanguage: function (el) { - - // Splits on a sequence of one or more commas, periods or spaces. - var words = el.getAttribute('data-scrollreveal').split(/[,. ]+/), - enterFrom, - parsed = {}; - - function filter (words) { - var ret = [], - - blacklist = [ - "from", - "the", - "and", - "then", - "but" - ]; - - words.forEach(function (word, i) { - if (blacklist.indexOf(word) > -1) { - return; - } - ret.push(word); - }); - - return ret; - } - - words = filter(words); - - words.forEach(function (word, i) { - - switch (word) { - case "enter": - enterFrom = words[i + 1]; - - if (enterFrom == "top" || enterFrom == "bottom") { - parsed.axis = "y"; - } - - if (enterFrom == "left" || enterFrom == "right") { - parsed.axis = "x"; - } - - break; - - case "after": - parsed.delay = words[i + 1]; - break; - - case "wait": - parsed.delay = words[i + 1]; - break; - - case "move": - parsed.distance = words[i + 1]; - break; - - case "over": - parsed.duration = words[i + 1]; - break; - - case "trigger": - parsed.eventName = words[i + 1]; - break; - - default: - // Unrecognizable words; do nothing. - break; - } - }); - - // After all values are parsed, let’s make sure our our - // pixel distance is negative for top and left entrances. - // - // ie. "move 25px from top" starts at 'top: -25px' in CSS. - - if (enterFrom == "top" || enterFrom == "left") { - - if (!typeof parsed.distance == "undefined") { - parsed.distance = "-" + parsed.distance; - } - - else { - parsed.distance = "-" + this.options.distance; - } - - } - - return parsed; - }, - - /*=============================================================================*/ - - genCSS: function (el, axis) { - var parsed = this.parseLanguage(el); - - var dist = parsed.distance || this.options.distance, - dur = parsed.duration || this.options.duration, - delay = parsed.delay || this.options.delay, - axis = parsed.axis || this.options.axis; - - var transition = "-webkit-transition: all " + dur + " ease " + delay + ";" + - "-moz-transition: all " + dur + " ease " + delay + ";" + - "-o-transition: all " + dur + " ease " + delay + ";" + - "transition: all " + dur + " ease " + delay + ";"; - - var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + - "-moz-transform: translate" + axis + "(" + dist + ");" + - "transform: translate" + axis + "(" + dist + ");" + - "opacity: 0;"; - - var target = "-webkit-transform: translate" + axis + "(0);" + - "-moz-transform: translate" + axis + "(0);" + - "transform: translate" + axis + "(0);" + - "opacity: 1;"; - return { - transition: transition, - initial: initial, - target: target, - totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) - }; - }, - - /*=============================================================================*/ - - animate: function (el) { - var css = this.genCSS(el); - - if (!el.getAttribute('data-sr-init')) { - el.setAttribute('style', css.initial); - el.setAttribute('data-sr-init', true); - } - - if (isElementInViewport(el, this.options.viewportFactor)) { - el.setAttribute('style', css.target + css.transition); - - setTimeout(function () { - el.removeAttribute('style'); - }, css.totalDuration); - } - - }// end animate() - }; // end scrollReveal.prototype - - document.addEventListener("DOMContentLoaded", function (evt) { - window.scrollReveal = new scrollReveal(); - }); - -})(window); \ No newline at end of file From 8cb747f3598cc857b92dd3017caa034938565f42 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Mon, 20 Jan 2014 01:48:27 -0800 Subject: [PATCH 07/21] scrollReveal.js initial commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f15543a6..89213228 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ #scrollReveal.js -####Declarative CSS3 transitions on scroll. +####Declarative on-scroll reveal animations. A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) > **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. From d3f9527ff893196de1a7ecb9e2ded517804670c6 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Mon, 20 Jan 2014 02:19:31 -0800 Subject: [PATCH 08/21] scrollReveal.js initial commit --- README.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 89213228..16a0044a 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,14 @@ I noticed a growing number of clients were requesting on-scroll CSS3 transitions Many thanks to [@Codrops](https://twitter.com/codrops), [@Mary Lou](https://twitter.com/crnacura) and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, [Codrops](http://tympanus.net/codrops/). -© 2014 [@JulianLloyd](https://twitter.com/julianlloyd)
-Licensed under the MIT license. -[http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php) +### 4. License + +Licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php) + +Copyright © 2014 © 2014 [@JulianLloyd](https://twitter.com/julianlloyd) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. From 98c794e4e9539c3e09bb33432a54d750fe52161f Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Wed, 22 Jan 2014 11:53:22 -0800 Subject: [PATCH 09/21] scrollReveal.js initial commit --- README.md | 4 +++- js/scrollReveal.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 16a0044a..2f9978f9 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ #scrollReveal.js ####Declarative on-scroll reveal animations. A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) - +*** +#(See Demo)[http://julianlloyd.me/scrollreveal] +*** > **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. ##1. Installation diff --git a/js/scrollReveal.js b/js/scrollReveal.js index b7c1e750..0f5f21ee 100644 --- a/js/scrollReveal.js +++ b/js/scrollReveal.js @@ -149,7 +149,7 @@ parseLanguage: function (el) { - // Splits on a sequence of one or more commas, periods or spaces. + // Splits on a sequence of one or more commas or spaces. var words = el.getAttribute('data-scrollreveal').split(/[, ]+/), enterFrom, parsed = {}; From 9bf4e76f8fd556299d8b3f161980a34b1c885d3e Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Wed, 22 Jan 2014 11:54:08 -0800 Subject: [PATCH 10/21] scrollReveal.js initial commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2f9978f9..e8c6ea10 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ####Declarative on-scroll reveal animations. A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) *** -#(See Demo)[http://julianlloyd.me/scrollreveal] +##[See Demo](http://julianlloyd.me/scrollreveal) *** > **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. From 90ac74f9122929d12a131da11f0b7733d7aaef9c Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Wed, 22 Jan 2014 12:01:36 -0800 Subject: [PATCH 11/21] scrollReveal.js initial commit --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index e8c6ea10..a61eba52 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,6 @@ A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) *** ##[See Demo](http://julianlloyd.me/scrollreveal) -*** > **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. ##1. Installation From 1ab57c73eadc366a172c3a6f61fe62e62bb65627 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Wed, 22 Jan 2014 12:05:34 -0800 Subject: [PATCH 12/21] Update README and add LICENSE file --- LICENSE.txt | 21 +++++++++++++++++++++ README.md | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 LICENSE.txt diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 00000000..e38ee5d2 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2014 Julian Lloyd https://twitter.com/julianlloyd + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index a61eba52..635c155c 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by [@JulianLloyd](https://twitter.com/julianlloyd) *** ##[See Demo](http://julianlloyd.me/scrollreveal) -> **Disclaimer:** Please bare in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. +> **Disclaimer:** Please bear in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. ##1. Installation Clone or download download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate ready-to-go when the `DOMContentReady` event fires. From c3356148b6d6ef8641a32543d16b4739b12e5d27 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Wed, 22 Jan 2014 15:32:56 -0800 Subject: [PATCH 13/21] scrollReveal.js initial commit --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 05d920f0..0f74211e 100644 --- a/index.html +++ b/index.html @@ -124,7 +124,6 @@

scrollReveal.js

- From ddc38e5eab7e2d057ad9b34e33f1eeee8f4ff577 Mon Sep 17 00:00:00 2001 From: Zachary Friedman Date: Wed, 22 Jan 2014 17:26:11 -0800 Subject: [PATCH 14/21] add support for bower --- bower.json | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..f04d2bfb --- /dev/null +++ b/bower.json @@ -0,0 +1,22 @@ +{ + "name": "scrollReveal.js", + "version": "0.0.0", + "homepage": "https://github.com/julianlloyd/scrollReveal.js", + "authors": [ + "Julian Lloyd " + ], + "description": "A simple way to create and maintain how elements fade in, triggered when they enter the viewport.", + "main": ["js/scrollReveal.js", "css/style.css"], + "keywords": [ + "animation" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "app/bower_components", + "test", + "tests" + ] +} From be831bba95b2521abd56dcf357444028fc01a987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Georg=20W=C3=B6lflein?= Date: Fri, 24 Jan 2014 17:48:51 +0100 Subject: [PATCH 15/21] Remove second "download" --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 635c155c..adc0fe69 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ A simple way to create and maintain how elements fade in, triggered when they en > **Disclaimer:** Please bear in mind that this plug-in is an experimental stage, and that breaking changes are virtually guaranteed in future updates. ##1. Installation -Clone or download download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate ready-to-go when the `DOMContentReady` event fires. +Clone or download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate ready-to-go when the `DOMContentReady` event fires. ``` From 768efe0afc822b1e07e5209f6f99212999b309ca Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Sat, 25 Jan 2014 15:11:53 +0100 Subject: [PATCH 16/21] Added syntax highlighting to readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index adc0fe69..1b7d6b36 100644 --- a/README.md +++ b/README.md @@ -23,11 +23,11 @@ Clone or download `scrollReveal.js` into your JavaScript folder, and reference i ##2. Usage By adding a `data-scrollreveal` attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport.

**Fig 1**: -``` +```html

Hello world!

``` However, scrollReveal.js allows you to define custom reveal behavior, using *descriptive language*.

**Fig 2**: -``` +```html

Foo

Bar

@@ -75,7 +75,7 @@ While **keywords** must be followed by an appropriate accepted **value**, the us - `but` **Fig 3**: -``` +```html
Example 1
Example 1
From cd6cdfcdc46e44ac9dcdae53f12c026e2c65be89 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Sat, 25 Jan 2014 13:22:38 -0800 Subject: [PATCH 17/21] Remove duplicate copyright --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1b7d6b36..aacc753f 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ Many thanks to [@Codrops](https://twitter.com/codrops), [@Mary Lou](https://twit Licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php) -Copyright © 2014 © 2014 [@JulianLloyd](https://twitter.com/julianlloyd) +Copyright © 2014 [@JulianLloyd](https://twitter.com/julianlloyd) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: From 7cb63b6cf95c2a31524d67d17d2c93ad532f79a7 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Sun, 26 Jan 2014 19:30:21 -0800 Subject: [PATCH 18/21] Update anchor styles, resolve #9 --- css/style.css | 8 ++++---- index.html | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 1798e6bc..9f99f459 100644 --- a/css/style.css +++ b/css/style.css @@ -132,16 +132,16 @@ p { margin: 0.33em 0; } -a:link, -a:visited { +a.inline:link, +a.inline:visited { color: #35ff99; text-decoration: none; border-radius: 5px; padding: 2px; } -a:hover, -a:active { +a.inline:hover, +a.inline:active { background: #35ff99; color: #202a39; } diff --git a/index.html b/index.html index 0f74211e..0bf33713 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

scrollReveal.js

Declarative on-scroll reveal animations.

-

An open-source project by @JulianLloyd

+

An open-source project by @JulianLloyd

From 6a23a70ac9606733ecac9ee40376c46fc0e43d56 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Sun, 26 Jan 2014 19:50:58 -0800 Subject: [PATCH 19/21] Update README --- README.md | 46 ++++++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index aacc753f..cb67b0d4 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ A simple way to create and maintain how elements fade in, triggered when they en Clone or download `scrollReveal.js` into your JavaScript folder, and reference it just before the closing `` tag. It will automatically instantiate ready-to-go when the `DOMContentReady` event fires. -``` +```html // Everything else // ... @@ -17,22 +17,20 @@ Clone or download `scrollReveal.js` into your JavaScript folder, and reference i ``` ->**NOTE:** scrollReveal.js does not require jQuery, but *does* rely upon CSS3 transitions; it has been developed exclusively for modern browser use only. +>**NOTE:** scrollReveal.js does not require jQuery, but *does* rely upon CSS3 transitions; as such, it has been developed exclusively for modern browser use only. ##2. Usage By adding a `data-scrollreveal` attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport.

**Fig 1**: ```html -

Hello world!

+

Hello world!

``` -However, scrollReveal.js allows you to define custom reveal behavior, using *descriptive language*.

**Fig 2**: +However, scrollReveal.js allows you to define custom reveals, using *descriptive language*.

**Fig 2**: ```html -

Foo

- +

Foo

Bar

- - +

Baz

``` @@ -46,22 +44,30 @@ These words describe the reveal behavior, using **keyword** / **value** pairs. --- - **Enter** — Controls the direction of your element transition. Whatever value is passed is considered the vector origin. For example, specifying `top` will reveal your element with a downward motion. - * Accepted value: `top`, `right`, `bottom` or `left` → (eg. `enter top`) + + * Accepted values: `top`, `right`, `bottom` or `left` + * Example: `enter top` --- - **Move** — The distance your element will travel during transition. - * Accepted value: **[ integer ] px** → (eg. `move 33px`) + + * Accepted value: **[ integer ] px** + * Example: `move 33px` --- - **Over** — The duration of your element’s transition. - * Accepted value: **[ decimal ] s** → (eg. `over 1.66s`) + + * Accepted value: **[ decimal ] s** + * Example: `over 1.66s` --- - **After/Wait** — The delay before your element beings its transition. - * Accepted value: **[ decimal ] s** → (eg. `after 0.33s` or `wait 0.33s`) + + * Accepted value: **[ decimal ] s** + * Example: `after 0.33s` or `wait 0.33s` --- @@ -77,17 +83,17 @@ While **keywords** must be followed by an appropriate accepted **value**, the us **Fig 3**: ```html -
Example 1
-
Example 1
+

foo

+

foo

-
Example 2
-
Example 2
-
Example 2
+

bar

+

bar

+

bar

``` -### 3. Contributions / Thanks! -I noticed a growing number of clients were requesting on-scroll CSS3 transitions for various site elements, and so scrollReveal.js was made to help with development. If you’d like to contribute—please do! +### 3. Contributions +There are already some great ideas under development (see [open issues](https://github.com/julianlloyd/scrollReveal.js/issues?state=open)); if you’d like to contribute, please do! Many thanks to [@Codrops](https://twitter.com/codrops), [@Mary Lou](https://twitter.com/crnacura) and the [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/), © 2014, [Codrops](http://tympanus.net/codrops/). @@ -95,7 +101,7 @@ Many thanks to [@Codrops](https://twitter.com/codrops), [@Mary Lou](https://twit Licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php) -Copyright © 2014 [@JulianLloyd](https://twitter.com/julianlloyd) +Copyright 2014 [@JulianLloyd](https://twitter.com/julianlloyd) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: From 59548f709484d229d917945eac688bfe4dc7498a Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Sun, 26 Jan 2014 23:56:50 -0800 Subject: [PATCH 20/21] Fix typo in README section 2.1.1 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cb67b0d4..0457fe02 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ These words describe the reveal behavior, using **keyword** / **value** pairs. --- -- **After/Wait** — The delay before your element beings its transition. +- **After/Wait** — The delay before your element begins its transition. * Accepted value: **[ decimal ] s** * Example: `after 0.33s` or `wait 0.33s` From f912056a2bb949eee0aff3c723c2c01da648f62d Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Mon, 27 Jan 2014 01:28:27 -0800 Subject: [PATCH 21/21] Minor cleanup for Bower support --- bower.json | 9 ++++++--- js/scrollReveal.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index f04d2bfb..52a375df 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,17 @@ { "name": "scrollReveal.js", - "version": "0.0.0", + "version": "0.0.1", "homepage": "https://github.com/julianlloyd/scrollReveal.js", "authors": [ "Julian Lloyd " ], "description": "A simple way to create and maintain how elements fade in, triggered when they enter the viewport.", - "main": ["js/scrollReveal.js", "css/style.css"], + "main": ["js/scrollReveal.js"], "keywords": [ - "animation" + "animation", + "CSS", + "transition", + "JavaScript" ], "license": "MIT", "ignore": [ diff --git a/js/scrollReveal.js b/js/scrollReveal.js index 0f5f21ee..10286531 100644 --- a/js/scrollReveal.js +++ b/js/scrollReveal.js @@ -241,7 +241,7 @@ /*=============================================================================*/ - genCSS: function (el, axis) { + genCSS: function (el) { var parsed = this.parseLanguage(el); var dist = parsed.distance || this.options.distance,