16/30 JS mousemove shadow offsetYand X

archeana · Jan 23, 2024 · ea7fd31 · ea7fd31
1 parent 4c6309e
commit ea7fd31
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 0 deletions.
diff --git a/Day_16/index.html b/Day_16/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Mouse Shadow</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="navigation">
+        <a class="card previous-card" href="https://archeana.github.io/JS30/Day_15/index.html"
+            onclick="goToPreviousProject()">
+            <span>Previous</span>
+        </a>
+        <a class="card home-card" href="https://archeana.github.io/JS30/" onclick="goToHomepage()">
+            <span>Home</span>
+        </a>
+        <a class="card next-card" href="#" onclick="goToNextProject()">
+            <span>Next</span>
+        </a>
+    </div>
+    <br>
+    <div class="hero">
+        <h1 contenteditable>🔥You can do it!</h1>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Day_16/script.js b/Day_16/script.js
@@ -0,0 +1,21 @@
+
+const hero = document.querySelector('.hero');
+const text = hero.querySelector('h1');
+const move = 500; //px
+
+function shadow(e) {
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+
+    if (this !== e.target) {
+        x = x + e.target.offsetLeft;
+        y = y + e.target.offsetTop;
+    }
+
+    const xmove = Math.round((x / width * move) - (move /2));
+    const ymove = Math.round((y / width * move) - (move /2));
+
+    text.style.textShadow = `${xmove}px ${ymove}px 0 #00008b`;
+}
+
+hero.addEventListener('mousemove', shadow);
diff --git a/Day_16/style.css b/Day_16/style.css
@@ -0,0 +1,69 @@
+html {
+    color: black;
+    font-family: sans-serif;
+    background: url("https://images.unsplash.com/photo-1508020268086-b96cf4f4bb2e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center no-repeat;
+    background-size: cover;
+    min-height: 100vh;
+}
+
+body {
+    margin: 0;
+}
+
+.navigation {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.card-back {
+    left: auto;
+}
+
+.card {
+    width: 100px;
+    height: 50px;
+    margin: 5px;
+    font-size: 20px;
+    background-color: #A2748B;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: 1s ease;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 16px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
+
+img {
+    background: rgba(233, 169, 229, 0.9);
+    padding: 10px;
+    border-radius: 50%;
+    width: 150px;
+    margin-bottom: 10px;
+}
+
+.hero {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: black;
+}
+
+h1 {
+    text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
+    font-size: 100px;
+}