Skip to content

Commit dc72daa

Browse files
ManeeshChibaManeeshChiba
committed
Version 1
1 parent d2bf660 commit dc72daa

File tree

11 files changed

+1066
-4
lines changed

11 files changed

+1066
-4
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
2-
package-lock.json
2+
package-lock.json
3+
src/index.html

‎dev/css/ssparallax.css‎

Lines changed: 899 additions & 0 deletions
Large diffs are not rendered by default.

‎dev/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test Document</title>
8+
<link rel="stylesheet" href="/css/ssparallax.css">
9+
<style>
10+
body {
11+
height: 500vh;
12+
}
13+
.test-block {
14+
width: 100px;
15+
height: 100px;
16+
background: skyblue;
17+
float: left;
18+
}
19+
.test-block:nth-child(even){
20+
background: rebeccapurple;
21+
}
22+
.container {
23+
position: fixed;
24+
bottom: 0;
25+
left: 0;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<div class="test-block" data-ssparallax="1"></div>
33+
<div class="test-block" data-ssparallax="2"></div>
34+
<div class="test-block" data-ssparallax="3"></div>
35+
<div class="test-block" data-ssparallax="4"></div>
36+
<div class="test-block" data-ssparallax="5"></div>
37+
<div class="test-block" data-ssparallax="6"></div>
38+
<div class="test-block" data-ssparallax="7"></div>
39+
<div class="test-block" data-ssparallax="8"></div>
40+
<div class="test-block" data-ssparallax="9"></div>
41+
<div class="test-block" data-ssparallax="10"></div>
42+
<div class="test-block" data-ssparallax="20"></div>
43+
<div class="test-block" data-ssparallax="30"></div>
44+
<div class="test-block" data-ssparallax="40"></div>
45+
<div class="test-block" data-ssparallax="50"></div>
46+
<div class="test-block" data-ssparallax="60"></div>
47+
<div class="test-block" data-ssparallax="70"></div>
48+
<div class="test-block" data-ssparallax="80"></div>
49+
<div class="test-block" data-ssparallax="90"></div>
50+
<div class="test-block" data-ssparallax="100"></div>
51+
</div>
52+
<script src="/js/ssparallax.js"></script>
53+
<script>
54+
window.onload = function(){
55+
var parallax = new ssparallax;
56+
}
57+
</script>
58+
</body>
59+
</html>

‎dev/js/ssparallax.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
(function(){
2+
this.ssparallax = function() {
3+
this.trackScroll();
4+
}
5+
6+
ssparallax.prototype.trackScroll = function(){
7+
var lastValue = 0;
8+
window.addEventListener('scroll',function(){
9+
var body = document.body,
10+
html = document.documentElement,
11+
height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ),
12+
viewport = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
13+
newHeight = height - viewport;
14+
scrollValue = Math.floor( (window.scrollY / newHeight) * 100 );
15+
document.body.style.setProperty("--ssparallax",scrollValue);
16+
});
17+
}
18+
}());

‎dist/css/ssparallax.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Test Document</title>
8+
<link rel="stylesheet" href="/css/ssparallax.css">
9+
<style>
10+
body {
11+
height: 500vh;
12+
}
13+
.test-block {
14+
width: 100px;
15+
height: 100px;
16+
background: skyblue;
17+
float: left;
18+
}
19+
.test-block:nth-child(even){
20+
background: rebeccapurple;
21+
}
22+
.container {
23+
position: fixed;
24+
bottom: 0;
25+
left: 0;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<div class="test-block" data-ssparallax="1"></div>
33+
<div class="test-block" data-ssparallax="2"></div>
34+
<div class="test-block" data-ssparallax="3"></div>
35+
<div class="test-block" data-ssparallax="4"></div>
36+
<div class="test-block" data-ssparallax="5"></div>
37+
<div class="test-block" data-ssparallax="6"></div>
38+
<div class="test-block" data-ssparallax="7"></div>
39+
<div class="test-block" data-ssparallax="8"></div>
40+
<div class="test-block" data-ssparallax="9"></div>
41+
<div class="test-block" data-ssparallax="10"></div>
42+
<div class="test-block" data-ssparallax="20"></div>
43+
<div class="test-block" data-ssparallax="30"></div>
44+
<div class="test-block" data-ssparallax="40"></div>
45+
<div class="test-block" data-ssparallax="50"></div>
46+
<div class="test-block" data-ssparallax="60"></div>
47+
<div class="test-block" data-ssparallax="70"></div>
48+
<div class="test-block" data-ssparallax="80"></div>
49+
<div class="test-block" data-ssparallax="90"></div>
50+
<div class="test-block" data-ssparallax="100"></div>
51+
</div>
52+
<script src="/js/ssparallax.js"></script>
53+
<script>
54+
window.onload = function(){
55+
var parallax = new ssparallax;
56+
}
57+
</script>
58+
</body>
59+
</html>

‎dist/js/ssparallax.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulp/tasks/copy.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ gulp.task('copy', function () {
66
var staticAssets = gulp.src([
77
'src/**/*',
88
// Exclude the following:
9-
'!src/*.html', // html files are handled by html task
109
'!src/{js,js/**}', // scripts are handled by scripts task
1110
'!src/{img,img/**}', // handled by image task
1211
'!src/{scss,scss/**}', // handled by styles task

‎gulp/tasks/watch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
var gulp = require('gulp');
44

55
gulp.task('watch', function() {
6-
gulp.watch('src/*.html', ['html']);
6+
gulp.watch('src/*.html', ['copy']);
77
gulp.watch('src/scss/**/*.scss', ['styles','scsslint']);
8-
gulp.watch('src/img/**/*', ['images']);
8+
gulp.watch('src/img/**/*', ['copy']);
99
gulp.watch('src/js/**/*.js', ['scripts','jshints']);
1010
});

‎src/js/ssparallax.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
(function(){
2+
this.ssparallax = function() {
3+
this.trackScroll();
4+
}
5+
6+
ssparallax.prototype.trackScroll = function(){
7+
var lastValue = 0;
8+
window.addEventListener('scroll',function(){
9+
var body = document.body,
10+
html = document.documentElement,
11+
height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ),
12+
viewport = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
13+
newHeight = height - viewport;
14+
scrollValue = Math.floor( (window.scrollY / newHeight) * 100 );
15+
document.body.style.setProperty("--ssparallax",scrollValue);
16+
});
17+
}
18+
}());

0 commit comments

Comments
 (0)