feat: add ImageSlide on mousemouse event

saqibbedar · Feb 9, 2025 · 04adad3 · 04adad3
1 parent 82332a8
commit 04adad3
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 0 deletions.
diff --git a/Animations/moveImage-on-mousemove/app.js b/Animations/moveImage-on-mousemove/app.js
@@ -0,0 +1,32 @@
+// var elem1 = document.querySelector("#elem1");
+// var elem1Img = document.querySelector("#elem1 img");
+
+// elem1.addEventListener("mousemove", (dets)=>{
+//     elem1Img.style.left = dets.x + "px";
+//     elem1Img.style.top = dets.y + "px";
+// })
+// elem1.addEventListener("mouseenter", (dets)=>{
+//     elem1Img.style.display = "block"; 
+// })
+// elem1.addEventListener("mouseleave", (dets)=>{
+//     elem1Img.style.display = "none"; 
+// })
+
+// above complete code is for one element, lets try for all
+
+var elem = document.querySelectorAll(".elem");
+
+elem.forEach((val)=>{
+
+    val.addEventListener("mouseenter", (dets)=>{
+        val.childNodes[3].style.opacity = 1;
+    })
+
+    val.addEventListener("mouseleave", (dets)=>{
+        val.childNodes[3].style.opacity = 0;
+    })
+
+    val.addEventListener("mousemove", (dets)=>{
+        val.childNodes[3].style.left = dets.x + "px";
+    })
+})
diff --git a/Animations/moveImage-on-mousemove/index.html b/Animations/moveImage-on-mousemove/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="main">
+        <div class="elem" id="elem1">
+            <h1>Hello1</h1>
+            <img src="https://images.unsplash.com/photo-1682695794947-17061dc284dd?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+        </div>
+        <div class="elem">
+            <h1>Hello2</h1>
+            <img src="https://images.unsplash.com/photo-1703717101037-132d2c3fdd03?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+        </div>
+        <div class="elem">
+            <h1>Hello3</h1>
+            <img src="https://images.unsplash.com/photo-1703621951351-568424f0aa22?q=80&w=1458&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+        </div>
+        <div class="elem">
+            <h1>Hello4</h1>
+            <img src="https://images.unsplash.com/photo-1703756292813-419b5c997612?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+        </div>
+        <div class="elem">
+            <h1>Hello5</h1>
+            <img src="https://images.unsplash.com/photo-1682685796852-aa311b46f50d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Animations/moveImage-on-mousemove/style.css b/Animations/moveImage-on-mousemove/style.css
@@ -0,0 +1,48 @@
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+     font-family: "Gilroy";
+     color: white;
+     text-decoration: none;
+}
+html, body{
+     width: 100%;
+     height: 100%;
+}
+.main{
+    height: 100%;
+    width: 100vw;
+    position: relative;
+    background: #111;
+    padding: 25px;
+    overflow: hidden;
+    /* overflow: hidden; */
+}
+.elem{
+    width: 100%;
+    height: 130px;
+    border-bottom: solid 2px white;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 0 12px;
+    position: relative;
+}
+.elem h1{
+    font-size: 6vw;
+    /* mix-blend-mode: difference;
+    z-index: 100; */
+}
+.elem img{
+    height: 150px;
+    width: 150px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 10px;
+    position: absolute;
+    /* transform: translate(-50%, -50%); */
+    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) .3s;
+    opacity: 0;
+    /* cursor: pointer; */
+}