From ea7fd315dd8ca68410fafdbe98fad1a0eb459c99 Mon Sep 17 00:00:00 2001 From: archeana Date: Tue, 23 Jan 2024 10:45:02 +0100 Subject: [PATCH] 16/30 JS mousemove shadow offsetYand X --- Day_16/index.html | 32 ++++++++++++++++++++++ Day_16/script.js | 21 +++++++++++++++ Day_16/style.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 Day_16/index.html create mode 100644 Day_16/script.js create mode 100644 Day_16/style.css diff --git a/Day_16/index.html b/Day_16/index.html new file mode 100644 index 0000000..00aed6a --- /dev/null +++ b/Day_16/index.html @@ -0,0 +1,32 @@ + + + + + + Mouse Shadow + + + + +
+ + Previous + + + Home + + + Next + +
+
+
+

🔥You can do it!

+
+ + + + + + \ No newline at end of file diff --git a/Day_16/script.js b/Day_16/script.js new file mode 100644 index 0000000..b221c89 --- /dev/null +++ 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); \ No newline at end of file diff --git a/Day_16/style.css b/Day_16/style.css new file mode 100644 index 0000000..859d380 --- /dev/null +++ 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; +} \ No newline at end of file