Skip to content

Commit 696f7ef

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#350 from Kumar-Ankit56/Kumar-Ankit56-patch-3
Flying Plane
2 parents 5bfec46 + f524cac commit 696f7ef

File tree

7 files changed

+154
-0
lines changed

7 files changed

+154
-0
lines changed

‎Flying plan/Readme.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
**Project title**
2+
plan flying animation.
3+
4+
**Project Description**
5+
6+
### How does it work
7+
While loading the page you will have the container with city images with some cloud and a plan and boat all are will be in the moving mode.
8+
9+
**Stack**:
10+
And in order to tick the check box just put x inside them for example - [x] like this. Please delete options that are not relevant.
11+
12+
- [x] Html
13+
- [x] CSS
14+
15+
16+
for more details please refer to the attached images.
17+
![Screenshot (211)](https://user-images.githubusercontent.com/73521123/169346745-5a5e0ee1-88bd-42e3-a0b9-7b6d36df28a2.png)
18+
19+
https://user-images.githubusercontent.com/73521123/169347099-c071e782-8580-4e27-9acc-fd027b65bace.mp4
20+
21+
22+
23+
24+
25+

‎Flying plan/boat.png

81.4 KB
Loading

‎Flying plan/cloud.png

20.3 KB
Loading

‎Flying plan/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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Image animation sequence</title>
9+
<!-- Remix icons -->
10+
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
11+
<!-- Link to your stylesheet -->
12+
<link rel="stylesheet" href="./style.css">
13+
</head>
14+
15+
<body>
16+
17+
<div class="scene">
18+
<img src="./newyork.png" class="city">
19+
<img src="./plane.png" class="plane">
20+
<img src="./cloud.png" class="cloud cloud-1">
21+
<img src="./cloud.png" class="cloud cloud-2">
22+
<img src="./cloud.png" class="cloud cloud-3">
23+
<img src="./boat.png" class="boat">
24+
</div>
25+
26+
</body>
27+
28+
</html>

‎Flying plan/newyork.png

4.78 MB
Loading

‎Flying plan/plane.png

3.23 MB
Loading

‎Flying plan/style.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* ======================== */
2+
/*
3+
Ignore the following styles. They are not important to achieve the effect.
4+
I'm only using them for looks (overall page background/font styles/centering content).
5+
*/
6+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Poppins', sans-serif;
16+
background-color: #090221;
17+
display: grid;
18+
place-content: center;
19+
height: 100vh;
20+
padding: 5px;
21+
color: #fff;
22+
}
23+
24+
/* ======================== */
25+
26+
.scene {
27+
width: 230px;
28+
height: 200px;
29+
background-color: #4695ea;
30+
border-radius: 4px;
31+
position: relative;
32+
overflow: hidden;
33+
}
34+
35+
.scene img {
36+
position: absolute;
37+
}
38+
39+
.city {
40+
bottom: -3px;
41+
width: 100%;
42+
height: 50%;
43+
object-fit: cover;
44+
}
45+
46+
.plane {
47+
top: 50px;
48+
left: -50px;
49+
width: 45%;
50+
animation: plane-move 15s linear forwards;
51+
}
52+
53+
.cloud {
54+
animation: clouds-move 22s linear forwards;
55+
}
56+
57+
.cloud-1 {
58+
width: 70px;
59+
top: 0;
60+
left: 30px;
61+
}
62+
63+
.cloud-2 {
64+
width: 35px;
65+
top: 20px;
66+
left: 125px;
67+
}
68+
69+
.cloud-3 {
70+
width: 45px;
71+
top: 55px;
72+
left: 145px;
73+
}
74+
75+
.boat {
76+
width: 30%;
77+
bottom: 0;
78+
right: -50px;
79+
animation: boat-move 20s linear forwards;
80+
}
81+
82+
@keyframes plane-move {
83+
to {
84+
transform:
85+
translate(300px, -100px);
86+
}
87+
}
88+
89+
@keyframes clouds-move {
90+
to {
91+
transform:
92+
translateX(-25px);
93+
}
94+
}
95+
96+
@keyframes boat-move {
97+
to {
98+
transform:
99+
translateX(-300px);
100+
}
101+
}

0 commit comments

Comments
 (0)