Skip to content

Commit 34835f6

Browse files
codingmeowcodingmeow
committed
added clouds parallax
1 parent 75d042e commit 34835f6

File tree

11 files changed

+22020
-53
lines changed

11 files changed

+22020
-53
lines changed

‎image/cloud1.svg

+5,453
Loading

‎image/cloud2.svg

+5,453
Loading

‎image/cloud3.svg

+5,450
Loading

‎image/cloud4.svg

+5,451
Loading

‎index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<!DOCTYPE html>
2-
<meta name="viewport" content="width=device-width, initial-scale=1">
32
<html lang="en">
43
<head>
54
<meta charset="UTF-8">
@@ -67,9 +66,21 @@ <h1>After all the hard work...</h1>
6766
</div>
6867
</div>
6968
<div class='scene' id='scene6a'>
69+
<div class='img cloud' id='cloud1'>
70+
<img src="./image/cloud1.svg">
71+
</div>
72+
<div class='img cloud' id='cloud2'>
73+
<img src="./image/cloud2.svg">
74+
</div>
7075
<div class='img' id='img3'>
7176
<img src="./image/3.svg"/>
7277
</div>
78+
<div class='img cloud' id='cloud3'>
79+
<img src="./image/cloud3.svg">
80+
</div>
81+
<div class='img cloud' id='cloud4'>
82+
<img src="./image/cloud4.svg">
83+
</div>
7384
<div class='script col-md-4 col-md-offset-1' id='text2'>
7485
<h3>"I got into Fullstack Academy!"</h3>
7586
</div>

‎js/functions.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
function newScene(trigger) {
22

3-
var duration = $(trigger)[0].scrollHeight;
3+
var scrollHeight = $(trigger)[0].scrollHeight;
44
return new ScrollMagic.Scene({
55
triggerElement: trigger,
6-
// triggerHook: 'onEnter',
7-
duration: duration / 2,
6+
duration: scrollHeight / 2,
87
reverse: true
98
});
109
};
1110

11+
function newCloudScene(trigger) {
12+
var scrollHeight = $(trigger)[0].scrollHeight;
13+
return new ScrollMagic.Scene({
14+
triggerElement: trigger,
15+
triggerHook: "onLeave",
16+
duration: '200%',
17+
reverse: true
18+
});
19+
}
20+
1221
function appear(el) {
1322
return TweenMax.to(el, 1, {
1423
opacity: 1
@@ -31,6 +40,13 @@ function pinTitles(el, sceneArray) {
3140
}
3241
};
3342

43+
function parallaxClouds(el, opacity, movement) {
44+
return TweenMax.to(el, 1, {
45+
opacity: opacity,
46+
x: movement
47+
})
48+
}
49+
3450
function removeTitlePin(el, sceneArray) {
3551
for (var i = 0; i < el.length; i++) {
3652
sceneArray.push(new ScrollMagic.Scene({
@@ -57,9 +73,11 @@ function showProgress(scenes) {
5773

5874
module.exports = {
5975
newScene: newScene,
76+
newCloudScene: newCloudScene,
6077
appear: appear,
6178
fade: fade,
6279
pinTitles: pinTitles,
80+
parallaxClouds: parallaxClouds,
6381
removeTitlePin: removeTitlePin,
6482
showProgress: showProgress
6583
};

‎js/main.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,23 @@ $(document).ready(function() {
4646

4747
// SCENE ACCEPTANCE
4848

49+
// cloud scenes
50+
var cloud1 = utilities.parallaxClouds('#cloud1', 0.3, '5%');
51+
var scene3C1 = utilities.newCloudScene('#scene6').setTween(cloud1);
52+
53+
var cloud2 = utilities.parallaxClouds('#cloud2', 0.5, '5%');
54+
var scene3C2 = utilities.newCloudScene('#scene6').setTween(cloud2);
55+
56+
var cloud3 = utilities.parallaxClouds('#cloud3', 1, '15%');
57+
var scene3C3 = utilities.newCloudScene('#scene6').setTween(cloud3);
58+
59+
var cloud4 = utilities.parallaxClouds('#cloud4', 1, '20%');
60+
var scene3C4 = utilities.newCloudScene('#scene6').setTween(cloud4);
61+
62+
var cloudsFade = utilities.fade('.cloud');
63+
var scene3C5 = utilities.newScene('#scene7').setTween(cloudsFade);
64+
65+
4966
var tween3a = utilities.appear('#img3');
5067
var scene3 = utilities.newScene('#scene6a').setTween(tween3a);
5168
progressScenes.push(scene3);
@@ -185,7 +202,7 @@ $(document).ready(function() {
185202

186203
// ADDING SCENES TO CONTROLLER
187204

188-
allScenes = [scene1, scene1a, scene2, scene2a, scene2b, scene2c, scene3, scene3a, scene4, scene5, scene5a, scene6, scene6a, scene6b, scene7, scene7a, scene7b, scene7c, scene7d, scene8, scene8a, scene8b, scene9, scene9a, scene9b, scene10, scene10a, scene11, scene11a, scene12, scene12a]
205+
allScenes = [scene1, scene1a, scene2, scene2a, scene2b, scene2c, scene3, scene3C1, scene3C2, scene3C3, scene3C4, scene3C5, scene3a, scene4, scene5, scene5a, scene6, scene6a, scene6b, scene7, scene7a, scene7b, scene7c, scene7d, scene8, scene8a, scene8b, scene9, scene9a, scene9b, scene10, scene10a, scene11, scene11a, scene12, scene12a]
189206
utilities.showProgress(progressScenes);
190207
controller.addScene(allScenes);
191208

‎public/main.js

+38-4
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,24 @@
33

44
function newScene(trigger) {
55

6-
var duration = $(trigger)[0].scrollHeight;
6+
var scrollHeight = $(trigger)[0].scrollHeight;
77
return new ScrollMagic.Scene({
88
triggerElement: trigger,
9-
// triggerHook: 'onEnter',
10-
duration: duration / 2,
9+
duration: scrollHeight / 2,
1110
reverse: true
1211
});
1312
};
1413

14+
function newCloudScene(trigger) {
15+
var scrollHeight = $(trigger)[0].scrollHeight;
16+
return new ScrollMagic.Scene({
17+
triggerElement: trigger,
18+
triggerHook: "onLeave",
19+
duration: '200%',
20+
reverse: true
21+
});
22+
}
23+
1524
function appear(el) {
1625
return TweenMax.to(el, 1, {
1726
opacity: 1
@@ -33,6 +42,13 @@ function pinTitles(el, sceneArray) {
3342
}
3443
};
3544

45+
function parallaxClouds(el, opacity, movement) {
46+
return TweenMax.to(el, 1, {
47+
opacity: opacity,
48+
x: movement
49+
});
50+
}
51+
3652
function removeTitlePin(el, sceneArray) {
3753
for (var i = 0; i < el.length; i++) {
3854
sceneArray.push(new ScrollMagic.Scene({
@@ -58,9 +74,11 @@ function showProgress(scenes) {
5874

5975
module.exports = {
6076
newScene: newScene,
77+
newCloudScene: newCloudScene,
6178
appear: appear,
6279
fade: fade,
6380
pinTitles: pinTitles,
81+
parallaxClouds: parallaxClouds,
6482
removeTitlePin: removeTitlePin,
6583
showProgress: showProgress
6684
};
@@ -116,6 +134,22 @@ $(document).ready(function () {
116134

117135
// SCENE ACCEPTANCE
118136

137+
// cloud scenes
138+
var cloud1 = utilities.parallaxClouds('#cloud1', 0.3, '5%');
139+
var scene3C1 = utilities.newCloudScene('#scene6').setTween(cloud1);
140+
141+
var cloud2 = utilities.parallaxClouds('#cloud2', 0.5, '5%');
142+
var scene3C2 = utilities.newCloudScene('#scene6').setTween(cloud2);
143+
144+
var cloud3 = utilities.parallaxClouds('#cloud3', 1, '15%');
145+
var scene3C3 = utilities.newCloudScene('#scene6').setTween(cloud3);
146+
147+
var cloud4 = utilities.parallaxClouds('#cloud4', 1, '20%');
148+
var scene3C4 = utilities.newCloudScene('#scene6').setTween(cloud4);
149+
150+
var cloudsFade = utilities.fade('.cloud');
151+
var scene3C5 = utilities.newScene('#scene7').setTween(cloudsFade);
152+
119153
var tween3a = utilities.appear('#img3');
120154
var scene3 = utilities.newScene('#scene6a').setTween(tween3a);
121155
progressScenes.push(scene3);
@@ -254,7 +288,7 @@ $(document).ready(function () {
254288

255289
// ADDING SCENES TO CONTROLLER
256290

257-
allScenes = [scene1, scene1a, scene2, scene2a, scene2b, scene2c, scene3, scene3a, scene4, scene5, scene5a, scene6, scene6a, scene6b, scene7, scene7a, scene7b, scene7c, scene7d, scene8, scene8a, scene8b, scene9, scene9a, scene9b, scene10, scene10a, scene11, scene11a, scene12, scene12a];
291+
allScenes = [scene1, scene1a, scene2, scene2a, scene2b, scene2c, scene3, scene3C1, scene3C2, scene3C3, scene3C4, scene3C5, scene3a, scene4, scene5, scene5a, scene6, scene6a, scene6b, scene7, scene7a, scene7b, scene7c, scene7d, scene8, scene8a, scene8b, scene9, scene9a, scene9b, scene10, scene10a, scene11, scene11a, scene12, scene12a];
258292
utilities.showProgress(progressScenes);
259293
controller.addScene(allScenes);
260294
});

‎public/style.css

+55-21
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,38 @@ h3, h4, p {
1616
small {
1717
font-family: 'Quicksand', sans-serif; }
1818

19-
.img {
20-
height: 70vh;
19+
#cloud1 {
2120
position: fixed;
22-
margin: auto;
23-
left: 30%;
24-
right: 0;
25-
top: 0;
26-
bottom: 0;
27-
opacity: 0; }
28-
.img img {
29-
display: block;
30-
height: 100%;
31-
width: 100%; }
32-
33-
.books {
34-
width: 95px;
21+
height: 15vh;
22+
width: auto;
23+
margin-left: -1200px;
24+
margin-top: 50px; }
25+
26+
#cloud2 {
27+
position: fixed;
28+
height: 15vh;
29+
width: auto;
30+
margin-left: 100px;
31+
margin-top: 150px;
32+
z-index: 0; }
33+
34+
#cloud3 {
35+
position: fixed;
36+
height: 30vh;
37+
width: auto;
38+
margin-left: -2000px;
39+
margin-bottom: 50px; }
40+
41+
#cloud4 {
3542
position: fixed;
36-
right: 0;
37-
bottom: -1069px;
38-
z-index: 2000; }
39-
.books img {
40-
width: 100%;
41-
display: block; }
43+
height: 10vh;
44+
width: auto;
45+
margin-left: -200px;
46+
margin-bottom: 200px;
47+
z-index: 600; }
48+
49+
#img3 {
50+
z-index: 500; }
4251

4352
#apply {
4453
text-decoration: none;
@@ -53,6 +62,9 @@ small {
5362
height: 60vh;
5463
width: auto; }
5564

65+
.title {
66+
z-index: 1000; }
67+
5668
#scene8 #img5 {
5769
height: 45vh;
5870
width: auto; }
@@ -75,6 +87,28 @@ small {
7587
.home {
7688
padding: 0;
7789
background: #a8c5d5; }
90+
.home .books {
91+
width: 95px;
92+
position: fixed;
93+
right: 0;
94+
bottom: -1069px;
95+
z-index: 2000; }
96+
.home .books img {
97+
width: 100%;
98+
display: block; }
99+
.home .img {
100+
height: 70vh;
101+
position: fixed;
102+
margin: auto;
103+
left: 30%;
104+
right: 0;
105+
top: 0;
106+
bottom: 0;
107+
opacity: 0; }
108+
.home .img img {
109+
display: block;
110+
height: 100%;
111+
width: 100%; }
78112
.home .scene {
79113
height: 100vh;
80114
overflow: hidden;

‎scss/journey.scss

+28
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,34 @@
55
.home {
66
padding: 0;
77
background: #a8c5d5;
8+
9+
.books {
10+
img {
11+
width: 100%;
12+
display: block;
13+
}
14+
width: 95px;
15+
position: fixed;
16+
right: 0;
17+
bottom: -1069px;
18+
z-index: 2000;
19+
}
20+
21+
.img {
22+
height: 70vh;
23+
position: fixed;
24+
margin: auto;
25+
left: 30%;
26+
right: 0;
27+
top: 0;
28+
bottom: 0;
29+
opacity: 0;
30+
img {
31+
display: block;
32+
height: 100%;
33+
width: 100%;
34+
}
35+
}
836
.scene {
937
height: 100vh;
1038
overflow: hidden;

0 commit comments

Comments
 (0)