Merge pull request #66 from thuongtruong1009/Applied-Visual-Design

feat: add lession 49 + 50 + 51 to Applied Visual Design lession
thuongtruong1009 · Jun 14, 2022 · 135ddef · 135ddef
2 parents 8e19ca8 + 640e5ae
commit 135ddef
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/Applied Visual Design/49_learn-how-bezier-curves-work.html b/Applied Visual Design/49_learn-how-bezier-curves-work.html
@@ -0,0 +1,48 @@
+<!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>Lession 49</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            background: linear-gradient( 35deg, #ccffff, #ffcccc);
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            margin-top: 50px;
+            animation-name: bounce;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+
+        #ball1 {
+            left: 27%;
+            animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
+        }
+
+        #ball2 {
+            left: 56%;
+            animation-timing-function: ease-out;
+        }
+
+        @keyframes bounce {
+            0% {
+                top: 0px;
+            }
+            100% {
+                top: 249px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="ball1"></div>
+    <div class="balls" id="ball2"></div>
+</body>
+
+</html>
diff --git a/Applied Visual Design/50_use-a-bezier-curve-to-move-a-graphic.html b/Applied Visual Design/50_use-a-bezier-curve-to-move-a-graphic.html
@@ -0,0 +1,49 @@
+<!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>Lession 50</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            margin-top: 50px;
+            animation-name: bounce;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+
+        #red {
+            background: red;
+            left: 27%;
+            animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+        }
+
+        #blue {
+            background: blue;
+            left: 56%;
+            animation-timing-function: ease-out;
+        }
+
+        @keyframes bounce {
+            0% {
+                top: 0px;
+            }
+            100% {
+                top: 249px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="red"></div>
+    <div class="balls" id="blue"></div>
+</body>
+
+</html>
diff --git a/Applied Visual Design/51_make-motion-more-natural-using-a-bezier-curve.html b/Applied Visual Design/51_make-motion-more-natural-using-a-bezier-curve.html
@@ -0,0 +1,53 @@
+<!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>Lession 51</title>
+    <style>
+        .balls {
+            border-radius: 50%;
+            position: fixed;
+            width: 50px;
+            height: 50px;
+            top: 60%;
+            animation-name: jump;
+            animation-duration: 2s;
+            animation-iteration-count: infinite;
+        }
+
+        #red {
+            background: red;
+            left: 25%;
+            animation-timing-function: linear;
+        }
+
+        #blue {
+            background: blue;
+            left: 50%;
+            animation-timing-function: ease-out;
+        }
+
+        #green {
+            background: green;
+            left: 75%;
+            animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
+        }
+
+        @keyframes jump {
+            50% {
+                top: 10%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="balls" id="red"></div>
+    <div class="balls" id="blue"></div>
+    <div class="balls" id="green"></div>
+</body>
+
+</html>