day 26 completed

4 years ago · 6265acc064
parent 1f744677ce
commit 6265acc064
3 changed files with 163 additions and 0 deletions
--- a/code/26-vertical-slider/index.html
+++ b/code/26-vertical-slider/index.html
@ -0,0 +1,57 @@
+<!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">
+    <title>26 vertical slider</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="left">
+        <span class="name-slide" style="background-color: #FD3555;">
+            Nature flower
+            <span class="small">all in pink</span>
+        </span>
+        <span class="name-slide" style="background-color: #2A86BA;">
+            Bluuue Sky
+            <span class="small">with it's mountains</span>
+        </span>
+        <span class="name-slide" style="background-color: #252E33;">
+            Lonely castle
+            <span class="small">in the wilderness</span>
+        </span>
+        <span class="name-slide" style="background-color: #ffb866;">
+            Flying eagle
+            <span class='small'>in the sunset</span>
+        </span>
+
+    </div>
+
+    <div class="right">
+        <div class="picture-slide"
+            style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80');">
+        </div>
+        <div class="picture-slide"
+            style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')">
+        </div>
+        <div class="picture-slide"
+            style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')">
+        </div>
+        <div class="picture-slide"
+            style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')">
+        </div>
+    </div>
+
+    <button id="up">up</button>
+    <button id="down">down</button>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/26-vertical-slider/script.js
+++ b/code/26-vertical-slider/script.js
@ -0,0 +1,36 @@
+let currentSlide = 4;
+
+const descriptions = document.querySelector(".left");
+const pictures = document.querySelector(".right");
+
+const upButton = document.getElementById("up");
+const downButton = document.getElementById("down");
+
+upButton.addEventListener("click", upSlide);
+downButton.addEventListener("click", downSlide);
+
+function upSlide() {
+  currentSlide--;
+
+  if (currentSlide === 0) {
+    descriptions.style.transform = "translateY(-300vh)";
+    pictures.style.transform = "translateY(0)";
+    currentSlide = 4;
+  } else {
+    descriptions.style.transform = `translateY(-${(currentSlide - 1) * 100}vh)`;
+    pictures.style.transform = `translateY(-${(4 - currentSlide) * 100}vh)`;
+  }
+}
+
+function downSlide() {
+  currentSlide++;
+
+  if (currentSlide === 5) {
+    descriptions.style.transform = "translateY(0)";
+    pictures.style.transform = "translateY(-300vh)";
+    currentSlide = 1;
+  } else {
+    descriptions.style.transform = `translateY(-${(currentSlide - 1) * 100}vh)`;
+    pictures.style.transform = `translateY(-${(4 - currentSlide) * 100}vh)`;
+  }
+}
--- a/code/26-vertical-slider/style.css
+++ b/code/26-vertical-slider/style.css
@ -0,0 +1,70 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  overflow: hidden;
+  font-family: Arial, Helvetica, sans-serif;
+  position: relative;
+}
+
+.left {
+  width: 30vw;
+  height: 400vh;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(-300vh);
+  transition: transform 0.3s linear;
+}
+
+.left > span {
+  text-align: center;
+}
+
+.left span.name-slide {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 25%;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 36px;
+  font-weight: 600;
+}
+
+.left span.name-slide span.small {
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 20px;
+}
+
+.right {
+  width: 70vw;
+  height: 400vh;
+  transition: transform 0.3s linear;
+}
+
+.right div.picture-slide {
+  width: 100%;
+  height: 25%;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+button {
+  position: absolute;
+}
+
+#up {
+  top: 0;
+  left: 0;
+}
+#down {
+  top: 20px;
+  left: 0;
+}