Merge pull request #65 from JonathanAllisson/plane

add plane animation
pulkit-30 · Oct 16, 2021 · 7b99fc9 · 7b99fc9
2 parents fffac49 + 0193cd4
commit 7b99fc9
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 1 deletion.
diff --git a/Plane-animation/README.md b/Plane-animation/README.md
@@ -0,0 +1,2 @@
+<img src="./plane.png">
+by [JonathanAllisson](https://github.com/JonathanAllisson)
diff --git a/Plane-animation/index.html b/Plane-animation/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+    <section>
+        <svg id="plane" width="200" height="200" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="plane">
+            <path id="Vector 41" d="M375 760L433.365 581L542 651.154L375 760Z" fill="#31447D"/>
+            <path id="Vector 42" d="M899 239L335 525.039L375.894 760L433.828 581.225L899 239Z" fill="#51649C"/>
+            <path id="Vector 43" d="M100 403.302L899 239L707.546 760L432.704 582.077L899 239L335.701 525.891L100 403.302Z" fill="#7383BF"/>
+            </g>
+        </svg>
+        <svg class="wind1" width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="wind">
+            <path id="Vector 46" d="M149.254 169.34C179.049 176.928 178.221 220.095 174.083 240.73C186 230.346 187.574 215.876 186.871 209.94C183.892 170.64 160.665 157.835 149.254 156.36C138.495 150.536 111.416 145.976 89.1695 174.332C66.923 202.689 70.9618 232.743 75.762 244.225C80.0657 257.205 100.789 285.362 149.254 294.149C197.719 302.935 244.596 297.81 261.977 294.149C298.127 290.155 323.055 275.51 331 268.688C329.841 269.686 315.606 273.48 267.935 280.669C220.264 287.858 177.89 283.665 162.662 280.669C142.965 276.509 101.683 262.098 94.1352 237.735C86.5873 213.372 93.6386 195.633 98.1078 189.809C102.742 179.824 119.46 161.752 149.254 169.34Z" fill="#F7F9FC"/>
+            <path id="Vector 45" d="M307.855 170.5C325.715 170.5 345.393 182.833 353 189C345.306 184.5 326.497 175.5 312.816 175.5C299.136 175.5 269.082 181.833 255.766 185C237.113 184.2 228.15 172.667 226 167C229.803 171 241.081 179 255.766 179C270.45 179 296.611 173.333 307.855 170.5Z" fill="#F7F9FC"/>
+            <path id="Vector 44" d="M344.94 236.5C384.112 233.3 418.635 257.5 431 270C409.732 257 387.97 246 354.832 244.5C328.321 243.3 276.19 256.667 253.438 263.5C224.949 261.9 207.276 239.833 202 229C209.749 237 230.885 252.7 253.438 251.5C281.631 250 295.974 240.5 344.94 236.5Z" fill="#F7F9FC"/>
+            <path id="Vector 47" d="M211.94 313.5C251.112 310.3 285.635 334.5 298 347C276.732 334 254.97 323 221.832 321.5C195.321 320.3 143.19 333.667 120.438 340.5C91.9495 338.9 74.2757 316.833 69 306C76.7487 314 97.8847 329.7 120.438 328.5C148.631 327 162.974 317.5 211.94 313.5Z" fill="#F7F9FC"/>
+            </g>
+        </svg>
+        <svg class="wind2" width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="wind">
+            <path id="Vector 46" d="M149.254 169.34C179.049 176.928 178.221 220.095 174.083 240.73C186 230.346 187.574 215.876 186.871 209.94C183.892 170.64 160.665 157.835 149.254 156.36C138.495 150.536 111.416 145.976 89.1695 174.332C66.923 202.689 70.9618 232.743 75.762 244.225C80.0657 257.205 100.789 285.362 149.254 294.149C197.719 302.935 244.596 297.81 261.977 294.149C298.127 290.155 323.055 275.51 331 268.688C329.841 269.686 315.606 273.48 267.935 280.669C220.264 287.858 177.89 283.665 162.662 280.669C142.965 276.509 101.683 262.098 94.1352 237.735C86.5873 213.372 93.6386 195.633 98.1078 189.809C102.742 179.824 119.46 161.752 149.254 169.34Z" fill="#F7F9FC"/>
+            <path id="Vector 45" d="M307.855 170.5C325.715 170.5 345.393 182.833 353 189C345.306 184.5 326.497 175.5 312.816 175.5C299.136 175.5 269.082 181.833 255.766 185C237.113 184.2 228.15 172.667 226 167C229.803 171 241.081 179 255.766 179C270.45 179 296.611 173.333 307.855 170.5Z" fill="#F7F9FC"/>
+            <path id="Vector 44" d="M344.94 236.5C384.112 233.3 418.635 257.5 431 270C409.732 257 387.97 246 354.832 244.5C328.321 243.3 276.19 256.667 253.438 263.5C224.949 261.9 207.276 239.833 202 229C209.749 237 230.885 252.7 253.438 251.5C281.631 250 295.974 240.5 344.94 236.5Z" fill="#F7F9FC"/>
+            <path id="Vector 47" d="M211.94 313.5C251.112 310.3 285.635 334.5 298 347C276.732 334 254.97 323 221.832 321.5C195.321 320.3 143.19 333.667 120.438 340.5C91.9495 338.9 74.2757 316.833 69 306C76.7487 314 97.8847 329.7 120.438 328.5C148.631 327 162.974 317.5 211.94 313.5Z" fill="#F7F9FC"/>
+            </g>
+        </svg>
+    </section>
+</body>
+</html>
diff --git a/Plane-animation/plane.png b/Plane-animation/plane.png
diff --git a/Plane-animation/styles.css b/Plane-animation/styles.css
@@ -0,0 +1,61 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+section {
+    width: 100%;
+    height: 100vh;
+    background-color: #EBEDF0;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+#plane {
+    position: absolute;
+    animation: plane 2s ease infinite alternate;
+    transform-origin: center;
+}
+
+@keyframes plane {
+    from {
+      transform: rotate(15deg) translateY(-30px);
+    }
+    to {
+      transform: rotate(-10deg) translateY(30px);
+    }
+  }
+
+.wind1,
+.wind2 {
+    width: 300px;
+    height: 300px;
+    position: absolute;
+    opacity: 1;
+}
+
+.wind1 {
+    top: 20%;
+    animation: winds 4s ease-in-out infinite;
+}
+
+.wind2 {
+    top: 60%;
+    animation: winds 6s ease-in-out infinite;
+    }
+
+@keyframes winds {
+    0% {
+        right: 0%;
+        opacity: 0;
+    }
+    25% {
+        opacity: 1;
+    }
+    100% {
+        right: 100%;
+        opacity: 1;
+    }
+}
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@
 | Loader Glowing                | https://jonathanallisson.github.io/loader/                              |
 | Parallax Sunset               | https://sinc0115.github.io/parallax-sunset/                             |
 | Captain America Animation     | https://jonathanallisson.github.io/Captain/                             |
-
+| Plane Animation               | https://jonathanallisson.github.io/plane/                               |
 ---
 
 ![Project Intro Gif](./Gif.gif)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<img src="./plane.png">
		by [JonathanAllisson](https://github.com/JonathanAllisson)