Skip to content

Commit 5491ce7

Browse files
FaizaAbdullah-codeFaizaAbdullah-code
committed
2 parents 1ad6f93 + 6fdf4ef commit 5491ce7

File tree

229 files changed

+78220
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

229 files changed

+78220
-2
lines changed

‎Animated Car/Animated Car/caraudio.mp3

152 KB
Binary file not shown.

‎Animated Car/Animated Car/caredit2.png

918 KB
Loading

‎Animated Car/Animated Car/clouds2.jpg

114 KB
Loading

‎Animated Car/Animated Car/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Car Animation</title>
8+
<link rel="stylesheet" href="styles.css">
9+
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="sky">
14+
<div class="land"></div>
15+
<div class="road"></div>
16+
<div class="car">
17+
<div class="wheel wheel1">
18+
<img src="tyreback2.png" alt="">
19+
</div>
20+
<div class="wheel wheel2">
21+
<img src="tyrefront2.png" alt="">
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</body>
27+
<script src="script.js"></script>
28+
</html>

‎Animated Car/Animated Car/land.png

153 KB
Loading

‎Animated Car/Animated Car/script.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// const audio = new Audio('caraudio.mp3');
2+
// var resp = audio.play();
3+
4+
// if(resp != undefined){
5+
// resp.then(_ => {
6+
// //autoplay starts
7+
// }).catch(error => {
8+
// //shoe error
9+
// });
10+
// }
11+
// audio.loop()=true;
12+
13+
var audio = document.createElement("audio");
14+
document.body.appendChild(audio);
15+
audio.src="caraudio.mp3"
16+
17+
18+
document.body.addEventListener("mousemove", function(){
19+
audio.play();
20+
audio.loop();
21+
})

‎Animated Car/Animated Car/sound.mp3

82.5 KB
Binary file not shown.

‎Animated Car/Animated Car/styles.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
overflow: hidden;
8+
animation: shakeBody linear 3s infinite;
9+
}
10+
11+
.sky{
12+
height: 100vh;
13+
width: 100%;
14+
position: absolute;
15+
background-image: url(clouds2.jpg);
16+
background-repeat: no-repeat;
17+
background-size: cover;
18+
}
19+
20+
.land{
21+
height: 100vh;
22+
width: 100%;
23+
position: absolute;
24+
background-image: url(land.png);
25+
background-size: cover;
26+
top: -21vh;
27+
}
28+
29+
.road{
30+
height: 50vh;
31+
width: 600vw;
32+
position: absolute;
33+
background-image: url(track.png);
34+
top: 70vh;
35+
background-repeat: repeat-x;
36+
animation: carMove linear 6s infinite;
37+
}
38+
39+
.car{
40+
height: 27vh;
41+
width: 42vw;
42+
background-image: url(caredit2.png);
43+
background-size: cover;
44+
background-repeat: no-repeat;
45+
position: absolute;
46+
left: 27vw;
47+
bottom: 20vh;
48+
animation: shake linear 2s infinite;
49+
}
50+
51+
.wheel1 img{
52+
width: 8.5vw;
53+
position: relative;
54+
top: 20vh;
55+
left: 4.5vw;
56+
animation: wheelRotation linear 0.4s infinite;
57+
}
58+
59+
.wheel2 img{
60+
width: 8.5vw;
61+
position: relative;
62+
top: 1vh;
63+
left: 29.2vw;
64+
animation: wheelRotation linear 0.4s infinite;
65+
}
66+
67+
@keyframes wheelRotation
68+
{
69+
100%{
70+
transform: rotate(360deg);
71+
}
72+
73+
}
74+
75+
@keyframes carMove
76+
{
77+
100%{
78+
transform: translateX(-500vw);
79+
}
80+
81+
}
82+
83+
@keyframes shake
84+
{
85+
0%{
86+
transform: translateY(-3px);
87+
}
88+
50%{
89+
transform: translateY(3px);
90+
}
91+
100%{
92+
transform: translateY(-3px);
93+
}
94+
95+
}
96+
97+
@keyframes shakeBody
98+
{
99+
0%{
100+
transform: translateY(-10px);
101+
}
102+
50%{
103+
transform: translateY(0px);
104+
}
105+
100%{
106+
transform: translateY(-10px);
107+
}
108+
109+
}

‎Animated Car/Animated Car/track.png

889 KB
Loading

‎Animated Car/Animated Car/tyreback2.png

128 KB
Loading

0 commit comments

Comments
 (0)