28 | Overscroll.js, is a small javascript library, giving you the ability to peek and show small easter eggs when the screen is scrolled beyond the height of the window. (It's a touch based ios/osx thing)
29 |
37 |
38 |
39 |
40 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/demo/video/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
28 |
29 |
32 |
33 |
--------------------------------------------------------------------------------
/demo/video/overscroll.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tholman/overscroll/6a2cf21ebf884b278b5abbefd34a799eeb9f4417/demo/video/overscroll.mp4
--------------------------------------------------------------------------------
/overscroll.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Overscroll.
3 | *
4 | * MIT licensed
5 | * Copyright (C) 2015 Tim Holman, http://tholman.com
6 | */
7 |
8 | /*********************************************
9 | * Utils
10 | *********************************************/
11 |
12 | function getSupportedTransform() {
13 | var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
14 | for(var i = 0; i < prefixes.length; i++) {
15 | if(document.createElement('div').style[prefixes[i]] !== undefined) {
16 | return prefixes[i];
17 | }
18 | }
19 | return false;
20 | }
21 |
22 | /*********************************************
23 | * Overscroll
24 | *********************************************/
25 |
26 | function Overscroll() {
27 |
28 | var scrollPosition = 0;
29 | var windowHeight = 0;
30 | var shakeYourBody = document.body;
31 | var windows95 = window;
32 | var transform = getSupportedTransform();
33 |
34 | var elements = {top: [], bottom: []};
35 |
36 | this.init = function() {
37 | this.window = window;
38 | this.onScroll();
39 | this.onResize();
40 | this.scrollEvent = this.window.addEventListener("scroll", this.onScroll);
41 | this.resizeEvent = this.window.addEventListener("resize", this.onResize);
42 | }
43 |
44 | this.bindElement = function(element, position, delta) {
45 |
46 | // Default data!
47 | delta = delta || 1;
48 | position = position || 'top';
49 |
50 | // Only bind events once there is something to overscroll.
51 | if( elements.top.length === 0 && elements.bottom.length === 0 ) {
52 | this.init();
53 | }
54 |
55 | var elementObject = {domElement: element, height: element.clientHeight, delta: delta};
56 | elements[position].push(elementObject);
57 | }
58 |
59 | this.onScroll = function() {
60 | scrollPosition = windows95.pageYOffset || shakeYourBody.scrollTop;
61 | doTheThing();
62 | }
63 |
64 | // @TODO, Should I check elements heights here, incase they change?
65 | this.onResize = function() {
66 | windowHeight = windows95.innerHeight;
67 | }
68 |
69 | // Zhu Li!
70 | var doTheThing = function() {
71 |
72 | var i;
73 |
74 | // @TODO: Could this be cleaner, somehow?
75 | // @TODO: Should this use RAF rather than not... its not very intensive
76 | if( scrollPosition <= 0 ) {
77 | for( i = 0; i < elements.top.length; i++ ) {
78 |
79 | var thisElement = elements.top[i];
80 | var movement = ( -scrollPosition * thisElement.delta );
81 |
82 | // Don't allow element to overreach its height.
83 | if( movement > thisElement.height ) {
84 | movement = thisElement.height;
85 | }
86 |
87 | thisElement.domElement.style[transform] = 'translateY(' + ( movement ) + 'px )';
88 | }
89 | } else if ( scrollPosition >= windowHeight ) {
90 |
91 | for( i = 0; i < elements.bottom.length; i++ ) {
92 |
93 | var thisElement = elements.bottom[i];
94 | var movement = ( ( scrollPosition - windowHeight ) * thisElement.delta );
95 |
96 | // Don't allow element to overreach its height.
97 | if( movement > thisElement.height ) {
98 | movement = thisElement.height;
99 | }
100 |
101 | thisElement.domElement.style[transform] = 'translateY(' + (-movement ) + 'px )';
102 | }
103 | }
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/overscroll.min.js:
--------------------------------------------------------------------------------
1 | function getSupportedTransform(){var e="transform WebkitTransform MozTransform OTransform msTransform".split(" ");for(var t=0;tr.height){o=r.height}r.domElement.style[i]="translateY("+o+"px )"}}else if(e>=t){for(n=0;nr.height){o=r.height}r.domElement.style[i]="translateY("+ -o+"px )"}}}}
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Overscroll.js
2 |
3 | A tiny javascript library, to capture the moments when you've scrolled more than the screen allows (osx/ios)... so we can sneak in some little easter eggs. [Here's a live demo](http://tholman.com/overscroll), [and here's a video ](http://tholman.com/overscroll/video)!
4 |
5 | ### Instructions
6 |
7 | `Overscroll.js` is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of easter egg elements is up to the user, `Overscroll.js` only handles moving your elements onto/off the screen, when you are scrolling beyond the pages height.
8 |
9 | #### HTML
10 |
11 | There aren't any restrictions for the `html` overscroll can bind too, that said, you do need to position them (ideally off screen) yourself. Overscroll will handle their movement.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | #### CSS
19 | You'll need to position the element you want to slide in/out of the screen initially. Since `overscroll` edits the transform of your element, you should try to avoid using transforms on it too.
20 |
21 | That said, your positioning doesn't need to be anything too complex. For example:
22 |
23 | ```css
24 | .easter-egg {
25 | /* Dimensions */
26 | width: 300px;
27 | height: 500px;
28 |
29 | /* Fixed position */
30 | position: fixed;
31 | left: 50%;
32 | top: 0px;
33 |
34 | /* Centered horizontally, and hidden above screen */
35 | margin-left: -150px;
36 | margin-top: -500px;
37 | }
38 | ```
39 |
40 | Above, the `margin-top: -500px` hides the element above the top of the screen, since overscroll will handle showing it when the there is overscroll in that direction.
41 |
42 | #### JS
43 |
44 | `Overscroll.js` is fairly straight forward when it comes to kicking it off, you'll need to create a new instance of overscroll (and include the script in the page), and then bind elements to it once they have been rendered. You can do this with `document.querySelector`.
45 |
46 | ```html
47 |
48 |
49 |
55 | ```
56 |
57 | There are options, for when the easter egg is at the top, or bottom.
58 |
59 | ```html
60 |
61 |
62 |
63 |
70 | ```
71 |
72 | And finally, a delta, to show how sensitive the scroll should be, when in the overscroll area... this makes it easier for people to find, but isn't really necessary.
73 |
74 | ```html
75 |
76 |
77 |
83 | ```
84 |
85 | #### Image/Example
86 |
87 | Here's a couple of screenshots of `Overscroll.js` in action. You should really look at the [demo](http://tholman.com/overscroll) though, to get a full feel for the interactions, or check out the [video](http://tholman.com/overscroll/video)!
88 |
89 | Overscroll on the bottom:
90 | 
91 |
92 | Overscroll on the top:
93 | 
94 |
95 | ### Browser support
96 |
97 | Overscroll has been tested in the latest stable builds of Safari and Chrome. IE & Firefox don't really have the "overscroll" zones, so they won't work. Its just for fun... so not the end of the world ;)
98 |
99 | ### License
100 |
101 | The MIT License (MIT)
102 |
103 | Copyright (C) 2017 ~ [Tim Holman](http://tholman.com) ~ timothy.w.holman@gmail.com
104 |
--------------------------------------------------------------------------------
23 | 
15 | 
16 |
17 |
18 |
19 |
20 |
21 |
22 | 
16 | ```
17 |
18 | #### CSS
19 | You'll need to position the element you want to slide in/out of the screen initially. Since `overscroll` edits the transform of your element, you should try to avoid using transforms on it too.
20 |
21 | That said, your positioning doesn't need to be anything too complex. For example:
22 |
23 | ```css
24 | .easter-egg {
25 | /* Dimensions */
26 | width: 300px;
27 | height: 500px;
28 |
29 | /* Fixed position */
30 | position: fixed;
31 | left: 50%;
32 | top: 0px;
33 |
34 | /* Centered horizontally, and hidden above screen */
35 | margin-left: -150px;
36 | margin-top: -500px;
37 | }
38 | ```
39 |
40 | Above, the `margin-top: -500px` hides the element above the top of the screen, since overscroll will handle showing it when the there is overscroll in that direction.
41 |
42 | #### JS
43 |
44 | `Overscroll.js` is fairly straight forward when it comes to kicking it off, you'll need to create a new instance of overscroll (and include the script in the page), and then bind elements to it once they have been rendered. You can do this with `document.querySelector`.
45 |
46 | ```html
47 | 
48 |
49 |
55 | ```
56 |
57 | There are options, for when the easter egg is at the top, or bottom.
58 |
59 | ```html
60 |