diff --git a/my code/06-scroll-animation/index.html b/my code/06-scroll-animation/index.html new file mode 100644 index 0000000..a7b6656 --- /dev/null +++ b/my code/06-scroll-animation/index.html @@ -0,0 +1,34 @@ + + + + + + + + 06 scroll animation + + + + + +

Scroll to see the animation

+ +
+
1
+
2
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+ +
+ + + + + + \ No newline at end of file diff --git a/my code/06-scroll-animation/script.js b/my code/06-scroll-animation/script.js new file mode 100644 index 0000000..e1f4edc --- /dev/null +++ b/my code/06-scroll-animation/script.js @@ -0,0 +1,19 @@ +const sliders = document.querySelectorAll(".slider"); + +window.addEventListener("scroll", slideIn); + +slideIn(); + +function slideIn() { + const triggerBottom = (window.innerHeight / 5) * 4; + + sliders.forEach((slider) => { + const sliderTop = slider.getBoundingClientRect().top; + + if (sliderTop < triggerBottom) { + slider.classList.add("show"); + } else { + slider.classList.remove("show"); + } + }); +} diff --git a/my code/06-scroll-animation/style.css b/my code/06-scroll-animation/style.css new file mode 100644 index 0000000..dea2cc0 --- /dev/null +++ b/my code/06-scroll-animation/style.css @@ -0,0 +1,44 @@ +* { + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + overflow-x: hidden; +} + +.container { + width: 180%; + display: flex; + flex-direction: column; + align-items: center; +} + +.slider { + background-color: steelblue; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + width: 400px; + height: 200px; + margin: 10px; + border-radius: 10px; + box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); + transition: transform 0.2s linear; +} + +.slider:nth-child(odd) { + transform: translateX(400%); +} + +.slider:nth-child(even) { + transform: translateX(-400%); +} + +.slider.show { + transform: translateX(0); +}