├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── app
├── assets
│ ├── javascript
│ │ └── full-page-scroll.js
│ └── stylesheet
│ │ └── full-page-scroll.css
└── index.html
├── demo
└── index.html
├── gulpfile.js
├── package.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node Modules
2 | node_modules
3 | _MACOSX
4 | dist
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "curly": true,
3 | "node": true,
4 | "strict": true,
5 | "quotmark": false
6 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Matheus Almeida
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 🚧 🚧 🚧
4 | # This project is no longer supported, please consider using https://github.com/alvarotrigo/fullPage.js/#fullpagejs instead.
5 |
6 |
7 |
8 |
9 | # Fullpage Scrolling with Vanilla JavaScript *DEPRECATED*
10 |
11 | ### Demo :earth_americas:
12 |
13 | https://fullpagescrollpurejs.surge.sh/
14 |
15 | ### Usage :wrench:
16 |
17 | Download last version :
18 | [fullpage.zip](https://github.com/almeida-matheus/fullPageScrollPureJS/releases/download/1.0.2/full-page-1.0.2.zip) or [fullpage.tar.gz](https://github.com/almeida-matheus/fullPageScrollPureJS/releases/download/1.0.2/full-page-1.0.2.tar.xz)
19 |
20 | #### Import css and javascript on your main html file
21 |
22 | ```html
23 |
35 |
36 |
37 |
38 |
39 | ```
40 |
41 | #### Call init method with configuration object
42 |
43 | ```html
44 |
53 | ```
54 |
55 | ### Full Example :dog:
56 |
57 | ```html
58 |
59 |
60 | Simple Example
61 |
69 |
70 |
71 |
72 |
73 |
74 |
83 |
84 |
85 | ```
86 |
87 | #### Props
88 |
89 | | Name | Desc | Example |
90 | | --------------- | --------------------------------- | ------- |
91 | | mainElement | container id | main |
92 | | displayDots | display dots navigation | true |
93 | | dotsPosition | dots navigation position | "right" |
94 | | animateTime | time to complete scroll animation | 0.7 |
95 | | animateFunction | css transition function | "ease" |
96 |
97 | ### Commands
98 |
99 | | Name | Desc |
100 | | ------------ | ------------------------ |
101 | | yarn install | install dependencies |
102 | | gulp | start development server |
103 | | gulp build | create production build |
104 |
105 | Made with :heart:
106 |
--------------------------------------------------------------------------------
/app/assets/javascript/full-page-scroll.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Full page
3 | */
4 | (function () {
5 | 'use strict';
6 |
7 | /**
8 | * Full scroll main function
9 | */
10 | var fullScroll = function (params) {
11 | /**
12 | * Main div
13 | * @type {Object}
14 | */
15 | var main = document.getElementById(params.mainElement);
16 |
17 | /**
18 | * Sections divclass
19 | * @type {Array}
20 | */
21 | var sections = main.getElementsByTagName('section');
22 |
23 | /**
24 | * Full page scroll configurations
25 | * @type {Object}
26 | */
27 | var defaults = {
28 | container : main,
29 | sections : sections,
30 | animateTime : params.animateTime || 0.7,
31 | animateFunction : params.animateFunction || 'ease',
32 | maxPosition: sections.length - 1,
33 | currentPosition: 0,
34 | displayDots: typeof params.displayDots != 'undefined' ? params.displayDots : true,
35 | dotsPosition: params.dotsPosition || 'left'
36 | };
37 |
38 | this.defaults = defaults;
39 | /**
40 | * Init build
41 | */
42 | this.init();
43 | };
44 |
45 | /**
46 | * Init plugin
47 | */
48 | fullScroll.prototype.init = function () {
49 | this.buildPublicFunctions()
50 | .buildSections()
51 | .buildDots()
52 | .addEvents();
53 |
54 | var anchor = location.hash.replace('#', '').split('/')[0];
55 | location.hash = 0;
56 | this.changeCurrentPosition(anchor);
57 | this.registerIeTags();
58 | };
59 |
60 | /**
61 | * Build sections
62 | * @return {Object} this(fullScroll)
63 | */
64 | fullScroll.prototype.buildSections = function () {
65 | var sections = this.defaults.sections;
66 | for (var i = 0; i < sections.length; i++) {
67 | sections[i].setAttribute('data-index', i);
68 | }
69 | return this;
70 | };
71 |
72 | /**
73 | * Build dots navigation
74 | * @return {Object} this (fullScroll)
75 | */
76 | fullScroll.prototype.buildDots = function () {
77 | this.ul = document.createElement('ul');
78 |
79 | this.ul.className = this.updateClass(1, 'dots', this.ul.className);
80 | this.ul.className = this.updateClass(1, this.defaults.dotsPosition == 'right' ? 'dots-right' : 'dots-left', this.ul.className);
81 |
82 | var _self = this;
83 | var sections = this.defaults.sections;
84 |
85 | for (var i = 0; i < sections.length; i++) {
86 | var li = document.createElement('li');
87 | var a = document.createElement('a');
88 |
89 | a.setAttribute('href', '#' + i);
90 | li.appendChild(a);
91 | _self.ul.appendChild(li);
92 | }
93 |
94 | this.ul.childNodes[0].firstChild.className = this.updateClass(1, 'active', this.ul.childNodes[0].firstChild.className);
95 |
96 | if (this.defaults.displayDots) {
97 | document.body.appendChild(this.ul);
98 | }
99 |
100 | return this;
101 | };
102 |
103 | /**
104 | * Add Events
105 | * @return {Object} this(fullScroll)
106 | */
107 | fullScroll.prototype.addEvents = function () {
108 |
109 | if (document.addEventListener) {
110 | document.addEventListener('mousewheel', this.mouseWheelAndKey, false);
111 | document.addEventListener('wheel', this.mouseWheelAndKey, false);
112 | document.addEventListener('keyup', this.mouseWheelAndKey, false);
113 | document.addEventListener('touchstart', this.touchStart, false);
114 | document.addEventListener('touchend', this.touchEnd, false);
115 | window.addEventListener("hashchange", this.hashChange, false);
116 |
117 | /**
118 | * Enable scroll if decive don't have touch support
119 | */
120 | if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
121 | if(!('ontouchstart' in window)){
122 | document.body.style = "overflow: scroll;";
123 | document.documentElement.style = "overflow: scroll;";
124 | }
125 | }
126 |
127 | } else {
128 | document.attachEvent('onmousewheel', this.mouseWheelAndKey, false);
129 | document.attachEvent('onkeyup', this.mouseWheelAndKey, false);
130 | }
131 |
132 | return this;
133 | };
134 |
135 | /**
136 | * Build public functions
137 | * @return {[type]} [description]
138 | */
139 | fullScroll.prototype.buildPublicFunctions = function () {
140 | var mTouchStart = 0;
141 | var mTouchEnd = 0;
142 | var _self = this;
143 |
144 | this.mouseWheelAndKey = function (event) {
145 | if (event.deltaY > 0 || event.keyCode == 40) {
146 | _self.defaults.currentPosition ++;
147 | _self.changeCurrentPosition(_self.defaults.currentPosition);
148 | } else if (event.deltaY < 0 || event.keyCode == 38) {
149 | _self.defaults.currentPosition --;
150 | _self.changeCurrentPosition(_self.defaults.currentPosition);
151 | }
152 | _self.removeEvents();
153 | };
154 |
155 | this.touchStart = function (event) {
156 | mTouchStart = parseInt(event.changedTouches[0].clientY);
157 | mTouchEnd = 0;
158 | };
159 |
160 | this.touchEnd = function (event) {
161 | mTouchEnd = parseInt(event.changedTouches[0].clientY);
162 | if (mTouchEnd - mTouchStart > 100 || mTouchStart - mTouchEnd > 100) {
163 | if (mTouchEnd > mTouchStart) {
164 | _self.defaults.currentPosition --;
165 | } else {
166 | _self.defaults.currentPosition ++;
167 | }
168 | _self.changeCurrentPosition(_self.defaults.currentPosition);
169 | }
170 | };
171 |
172 | this.hashChange = function (event) {
173 | if (location) {
174 | var anchor = location.hash.replace('#', '').split('/')[0];
175 | if (anchor !== "") {
176 | if (anchor < 0) {
177 | _self.changeCurrentPosition(0);
178 | } else if (anchor > _self.defaults.maxPosition) {
179 | _self.changeCurrentPosition(_self.defaults.maxPosition);
180 | } else {
181 | _self.defaults.currentPosition = anchor;
182 | _self.animateScroll();
183 | }
184 | }
185 | }
186 | };
187 |
188 | this.removeEvents = function () {
189 | if (document.addEventListener) {
190 | document.removeEventListener('mousewheel', this.mouseWheelAndKey, false);
191 | document.removeEventListener('wheel', this.mouseWheelAndKey, false);
192 | document.removeEventListener('keyup', this.mouseWheelAndKey, false);
193 | document.removeEventListener('touchstart', this.touchStart, false);
194 | document.removeEventListener('touchend', this.touchEnd, false);
195 |
196 | } else {
197 | document.detachEvent('onmousewheel', this.mouseWheelAndKey, false);
198 | document.detachEvent('onkeyup', this.mouseWheelAndKey, false);
199 | }
200 |
201 | setTimeout(function(){
202 | _self.addEvents();
203 | }, 600);
204 | };
205 |
206 | this.animateScroll = function () {
207 | var animateTime = this.defaults.animateTime;
208 | var animateFunction = this.defaults.animateFunction;
209 | var position = this.defaults.currentPosition * 100;
210 |
211 | this.defaults.container.style.webkitTransform = 'translateY(-' + position + '%)';
212 | this.defaults.container.style.mozTransform = 'translateY(-' + position + '%)';
213 | this.defaults.container.style.msTransform = 'translateY(-' + position + '%)';
214 | this.defaults.container.style.transform = 'translateY(-' + position + '%)';
215 | this.defaults.container.style.webkitTransition = 'all ' + animateTime + 's ' + animateFunction;
216 | this.defaults.container.style.mozTransition = 'all ' + animateTime + 's ' + animateFunction;
217 | this.defaults.container.style.msTransition = 'all ' + animateTime + 's ' + animateFunction;
218 | this.defaults.container.style.transition = 'all ' + animateTime + 's ' + animateFunction;
219 |
220 | for (var i = 0; i < this.ul.childNodes.length; i++) {
221 | this.ul.childNodes[i].firstChild.className = this.updateClass(2, 'active', this.ul.childNodes[i].firstChild.className);
222 | if (i == this.defaults.currentPosition) {
223 | this.ul.childNodes[i].firstChild.className = this.updateClass(1, 'active', this.ul.childNodes[i].firstChild.className);
224 | }
225 | }
226 | };
227 |
228 | this.changeCurrentPosition = function (position) {
229 | if (position !== "") {
230 | _self.defaults.currentPosition = position;
231 | location.hash = _self.defaults.currentPosition;
232 | }
233 | };
234 |
235 | this.registerIeTags = function () {
236 | document.createElement('section');
237 | };
238 |
239 | this.updateClass = function (type, newClass, currentClass) {
240 | if (type == 1) {
241 | return currentClass += ' ' + newClass;
242 | } else if (type == 2) {
243 | return currentClass.replace(newClass, '');
244 | }
245 | };
246 |
247 | return this;
248 | };
249 | window.fullScroll = fullScroll;
250 | })();
--------------------------------------------------------------------------------
/app/assets/stylesheet/full-page-scroll.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin: 0;
3 | padding: 0;
4 | width: 100%;
5 | height: 100%;
6 | overflow: hidden;
7 | }
8 |
9 | .scroll-container {
10 | width: 100%;
11 | height: 100%;
12 | position: relative;
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | .scroll-container section {
18 | width: 100%;
19 | height: 100%;
20 | }
21 |
22 | .dots {
23 | z-index: 1;
24 | list-style: none;
25 | padding: 0;
26 | position: absolute;
27 | top: 50%;
28 | -webkit-transform: translateY(-50%);
29 | -moz-transform: translateY(-50%);
30 | -o-transform: translateY(-50%);
31 | -ms-transform: translateY(-50%);
32 | transform: translateY(-50%);
33 | }
34 |
35 | .dots li a {
36 | padding: 10px;
37 | width: 4px;
38 | height: 5px;
39 | display: block;
40 | }
41 |
42 | .dots li a:before {
43 | content: '';
44 | position: absolute;
45 | width: 8px;
46 | height: 8px;
47 | background: rgba(255, 255, 255, 0.48);
48 | -webkit-border-radius: 10px;
49 | -moz-border-radius: 10px;
50 | -ms-border-radius: 10px;
51 | -o-border-radius: 10px;
52 | border-radius: 10px;
53 | -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
54 | -moz-transition: -moz-transform 0.3s ease, background-color 0.3s ease;
55 | -ms-transition: -ms-transform 0.3s ease, background-color 0.3s ease;
56 | -o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
57 | transition: transform 0.3s ease, background-color 0.3s ease;
58 | }
59 |
60 | .dots li a.active:before {
61 | content: '';
62 | background-color: #FFFFFF;
63 | width: 14px;
64 | height: 14px;
65 | margin-top: -4px;
66 | left: 7px;
67 | background-color: white;
68 | -webkit-transform: scale(1.0);
69 | -moz-transform: scale(1.0);
70 | -ms-transform: scale(1.0);
71 | -o-transform: scale(1.0);
72 | transform: scale(1.0);
73 | }
74 |
75 | .dots-right {
76 | right: 10px;
77 | }
78 |
79 | .dots-left {
80 | left: 10px;
81 | }
82 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Full page scroll
5 |
65 |
71 |
72 |
73 |
74 | It's beautiful and don't need Jquery :D
75 |
76 |
79 |
80 |
81 |
82 | Working on Tablets and Phones
83 |
84 |
85 |
86 |
87 | Edivaldo Pericleiton Rasta
88 |
89 |
90 |
91 |
92 | Funciona até no IE!
93 |
94 |
95 |
100 |
Full page scroll
5 |
65 |
71 |
72 |
73 |
74 | It's beautiful and don't need Jquery :D
75 |
76 |
84 |
85 |
86 |
87 | Working on Tablets and Phones
88 |
89 |
90 |
91 |
92 | Anuncie aqui
93 |
94 |
95 |
96 |
97 | Funciona até no IE ^^ (IE 9 +)!
98 |
99 |
100 |
101 |
102 | Edivaldo Pericleiton Rasta
103 |
104 |
105 |
70 |