Skip to content

Commit 640c0e2

Browse files
zoeyfrisartzoeyfrisart
committed
Fixed timings
- Properly timed animations - animated the h2 - changed when the animations play
1 parent 855cb09 commit 640c0e2

File tree

3 files changed

+61
-48
lines changed

3 files changed

+61
-48
lines changed

‎css/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ h2{
101101
top: 20px;
102102
right: 100px;
103103
width: 0px;
104-
height: 0px;
104+
height: 500px;
105105
overflow: hidden;
106106
background: #0b0b0b;
107107
color: lime;
@@ -133,7 +133,7 @@ h2{
133133
font-size: 45px;
134134
color: #e2cb1e;
135135
position: absolute;
136-
top: -300px;
136+
top: -290px;
137137
}
138138

139139
.portfolio-item2 img{
@@ -259,7 +259,7 @@ h2{
259259
font-size: 42px;
260260
color: #e2cb1e;
261261
text-align: center;
262-
margin-top: -800px;
262+
margin-top: -100px;
263263
}
264264

265265
.portfolio-item4{
@@ -298,3 +298,7 @@ h2{
298298
bottom: 90px;
299299
right: 1400px;
300300
}
301+
302+
[data-info="watImLearning"]{
303+
margin-top: -170px;
304+
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="description" content="Jquery Animation">
99
<link rel="stylesheet" href="css/style.css" type="text/css">
1010
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
11-
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.min.js"></script>
11+
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.min.js"></script>-->
1212
<link href="https://fonts.googleapis.com/css?family=Caveat:400,700%7CMarck+Script%7CPress+Start+2P" rel="stylesheet">
1313
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
1414
</head>

‎js/scrips.js‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,13 @@ function walk(e){
4747
// -------------------------
4848

4949
if(position>= -1200 && position <= -760 && PoIt1Ran === true) {
50-
$('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 220);
50+
$('.portfolio-item1').stop().animate({width: '0px', padding: '0px'}, 320);
5151
PoIt1Ran = false;
5252
} else if(position <= -1214 && position >= -1400 && PoIt1Ran === false) {
53-
$('.portfolio-item1').stop().animate({height: '500px', width: '1200px', padding: '15px'}, 420);
53+
$('.portfolio-item1').stop().animate({width: '1200px', padding: '15px'}, 620);
5454
PoIt1Ran = true;
5555
} else if(position <= -1650 && position >= -1700 && PoIt1Ran === true) {
56-
$('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 220);
56+
$('.portfolio-item1').stop().animate({width: '0px', padding: '0px'}, 320);
5757
PoIt1Ran = false;
5858
}
5959

@@ -63,62 +63,71 @@ if(position>= -1200 && position <= -760 && PoIt1Ran === true) {
6363

6464
if(position>= -1990 && position <= -1715 && PoIt2Ran === true) {
6565
// $('.portfolio-item2').stop().slideUp(100);
66-
$('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 160);
67-
$('img[data-info="css3"]').stop().animate({top: '800px'}, 170);
68-
$('img[data-info="html5"]').stop().animate({top: '800px'}, 170);
69-
$('img[data-info="js"]').stop().animate({top: '800px'}, 170);
66+
$('h2[data-info="vaardigheden"]').stop().animate({top: '-290px'}, 360);
67+
$('img[data-info="css3"]').stop().animate({top: '800px'}, 370);
68+
$('img[data-info="html5"]').stop().animate({top: '800px'}, 370);
69+
$('img[data-info="js"]').stop().animate({top: '800px'}, 370);
7070
PoIt2Ran = false;
71-
} else if(position <= -2000 && position >= -2700 && PoIt2Ran === false) {
71+
} else if(position <= -2000 && position >= -2500 && PoIt2Ran === false) {
7272
// $('.portfolio-item2').stop().slideDown(200);
73-
$('h2[data-info="vaardigheden"]').stop().animate({top: '-50px'}, 170);
74-
$('img[data-info="css3"]').stop().animate({top: '120px'}, 190, 'swing');
75-
$('img[data-info="html5"]').stop().animate({top: '120px'}, 190, 'swing');
76-
$('img[data-info="js"]').stop().animate({top: '120px'}, 190, 'swing');
73+
$('h2[data-info="vaardigheden"]').stop().animate({top: '-50px'}, 670);
74+
$('img[data-info="css3"]').stop().animate({top: '120px'}, 690, 'swing');
75+
$('img[data-info="html5"]').stop().animate({top: '120px'}, 690, 'swing');
76+
$('img[data-info="js"]').stop().animate({top: '120px'}, 690, 'swing');
7777
PoIt2Ran = true
78-
} else if(position <= -2900 && position >= -3050 && PoIt2Ran === true) {
78+
} else if(position <= -2700 && position >= -2850 && PoIt2Ran === true) {
7979
// $('.portfolio-item2').stop().slideUp(100);
80-
$('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 160);
81-
$('img[data-info="css3"]').stop().animate({top: '800px'}, 170);
82-
$('img[data-info="html5"]').stop().animate({top: '800px'}, 170);
83-
$('img[data-info="js"]').stop().animate({top: '800px'}, 170);
80+
$('h2[data-info="vaardigheden"]').stop().animate({top: '-290px'}, 360);
81+
$('img[data-info="css3"]').stop().animate({top: '800px'}, 370);
82+
$('img[data-info="html5"]').stop().animate({top: '800px'}, 370);
83+
$('img[data-info="js"]').stop().animate({top: '800px'}, 370);
8484
PoIt2Ran = false;
8585
}
8686

8787
// -------------------------
8888
// Portfolio Item 3 code
8989
// -------------------------
90-
if(position >= -3490 && position <= - 3100) {
91-
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '-800px'}, 160);
92-
$('p[data-info="html-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
93-
$('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
94-
$('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
95-
} else if(position <= -3500 && position >= -4000) {
96-
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '170px'}, 380);
97-
$('p[data-info="html-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
98-
$('p[data-info="css-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
99-
$('p[data-info="js-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
100-
} else if(position <= -4200 && position >= -4250) {
101-
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '-800px'}, 160);
102-
$('p[data-info="html-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
103-
$('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
104-
$('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
90+
if(position >= -3090 && position <= - 2900 && PoIt3Ran === true) {
91+
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '-100px'}, 360);
92+
$('p[data-info="html-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
93+
$('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
94+
$('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
95+
PoIt3Ran = false;
96+
} else if(position <= -3100 && position >= -3400 && PoIt3Ran === false) {
97+
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '170px'}, 880);
98+
$('p[data-info="html-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},890);
99+
$('p[data-info="css-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},890);
100+
$('p[data-info="js-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},890);
101+
PoIt3Ran = true;
102+
} else if(position <= -3650 && position >= -3750 && PoIt3Ran === true) {
103+
$('h2[data-info="timeSpent"]').stop().animate({'margin-top': '-100px'}, 360);
104+
$('p[data-info="html-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
105+
$('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
106+
$('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},300);
107+
PoIt3Ran = false;
105108
}
106109

107110
// -------------------------
108111
// Portfolio Item 4 code
109112
// -------------------------
110-
if(position >= -4490 && position <= -4290){
111-
$('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},200);
112-
$('img[data-info="jquary-l"]').stop().animate({right: '1400px'},200);
113-
$('img[data-info="less-l"]').stop().animate({left: '1400px'},200);
114-
} else if(position <= -4500 && position >= -5000){
115-
$('img[data-info="es6-l"]').stop().animate({bottom: '80px'},450);
116-
$('img[data-info="jquary-l"]').stop().animate({right: '50px'},450);
117-
$('img[data-info="less-l"]').stop().animate({left: '50px'},450);
118-
} else if(position <= -5200 && position >= -5250){
119-
$('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},200);
120-
$('img[data-info="jquary-l"]').stop().animate({right: '1400px'},200);
121-
$('img[data-info="less-l"]').stop().animate({left: '1400px'},200);
113+
if(position >= -3934 && position <= -3820 && PoIt4Ran === true){
114+
$('h2[data-info="watImLearning"]').stop().animate({'margin-top': '-170px'},360)
115+
$('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},300);
116+
$('img[data-info="jquary-l"]').stop().animate({right: '1400px'},300);
117+
$('img[data-info="less-l"]').stop().animate({left: '1400px'},300);
118+
PoIt4Ran = false;
119+
} else if(position <= -3950 && position >= -4250 && PoIt4Ran === false){
120+
$('h2[data-info="watImLearning"]').stop().animate({'margin-top': '170px'},360)
121+
$('img[data-info="es6-l"]').stop().animate({bottom: '80px'},600);
122+
$('img[data-info="jquary-l"]').stop().animate({right: '50px'},600);
123+
$('img[data-info="less-l"]').stop().animate({left: '50px'},600);
124+
PoIt4Ran = true;
125+
} else if(position <= -4390 && position >= -4550 && PoIt4Ran === true){
126+
$('h2[data-info="watImLearning"]').stop().animate({'margin-top': '-170px'},360)
127+
$('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},300);
128+
$('img[data-info="jquary-l"]').stop().animate({right: '1400px'},300);
129+
$('img[data-info="less-l"]').stop().animate({left: '1400px'},300);
130+
PoIt4Ran = false;
122131
}
123132

124133
// --------------------------

0 commit comments

Comments
 (0)