expanding images animation 2022

wassimOubaziz · Jan 11, 2024 · af84ca9 · af84ca9
1 parent 12aee20
commit af84ca9
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 0 deletions.
diff --git a/images/0.webp b/images/0.webp
diff --git a/images/1.jpg b/images/1.jpg
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.webp b/images/3.webp
diff --git a/images/4.jpg b/images/4.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Expanding Cards</title>
+  </head>
+  <body>
+    <div class="images">
+      <div class="image b1">
+        <h3>Mounting</h3>
+      </div>
+      <div class="image b2 active">
+        <h3>Sea with good vue</h3>
+      </div>
+      <div class="image b3">
+        <h3>Beach with lift</h3>
+      </div>
+      <div class="image b4">
+        <h3>Road to best sea</h3>
+      </div>
+      <div class="image b5">
+        <h3>Car beach</h3>
+      </div>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,16 @@
+const images = document.querySelectorAll("body .images .image");
+
+console.log(images);
+
+function anim(value) {
+  images.forEach((image) => {
+    image.classList.remove("active");
+  });
+  images[value].classList.add("active");
+}
+
+images.forEach((image, value) => {
+  image.addEventListener("click", function () {
+    anim(value);
+  });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  grid-template-columns: 0.5fr 11fr 0.5fr;
+}
+
+body .images {
+  display: flex;
+  grid-column: 2/3;
+}
+
+body .images .image {
+  margin-right: 15px;
+  width: 100%;
+  height: 75vh;
+  background-image: url(./images/0.webp);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 50px;
+  transition: width 1s ease-in;
+  position: relative;
+  overflow: hidden;
+}
+
+body .images .image.active {
+  width: 1000%;
+  transition: width 1s ease-in;
+}
+
+body .images .image.b2 {
+  background-image: url(./images/1.jpg);
+}
+
+body .images .image.b3 {
+  background-image: url(./images/2.jpg);
+}
+
+body .images .image.b4 {
+  background-image: url(./images/3.webp);
+}
+
+body .images .image.b5 {
+  background-image: url(./images/4.jpg);
+}
+
+body .images .image h3 {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: white;
+  transform: translateX(-200px);
+  transition-property: transform;
+  transition-delay: 0s;
+  transition-duration: 0.6s;
+  transition-timing-function: ease-in-out;
+}
+
+body .images .image.image.active h3 {
+  transform: translateX(0px);
+  transition-property: transform;
+  transition-delay: 0.4s;
+  transition-duration: 0.6s;
+  transition-timing-function: ease-in-out;
+}