CSS Clip Path Animation Project

HuXn-WebDev · HuXn-WebDev · commit e958aaced884 · 2022-08-04T06:50:21.000-07:00
diff --git a/53. CSS Clip Path Animation/app.js b/53. CSS Clip Path Animation/app.js
@@ -0,0 +1,6 @@
+let pos = document.documentElement;
+
+pos.addEventListener("mousemove", (e) => {
+  pos.style.setProperty("--1", e.clientX + "px");
+  pos.style.setProperty("--2", e.clientY + "px");
+});
diff --git a/53. CSS Clip Path Animation/index.html b/53. CSS Clip Path Animation/index.html
@@ -0,0 +1,14 @@
+<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>CSS Clip Path Animation</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container"></div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/53. CSS Clip Path Animation/jonatan-pie-3l3RwQdHRHg-unsplash.jpg b/53. CSS Clip Path Animation/jonatan-pie-3l3RwQdHRHg-unsplash.jpg
diff --git a/53. CSS Clip Path Animation/style.css b/53. CSS Clip Path Animation/style.css
@@ -0,0 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body {
+  background: black;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: url(jonatan-pie-3l3RwQdHRHg-unsplash.jpg) no-repeat center;
+  background-size: cover;
+  clip-path: circle(200px at var(--1) var(--2));
+}
