I’m trying to create a simple slider with 3 sections, each section has some texts, first, I started to create animations for the paragraphs of the section-a it works, but what I want is to create a slider(carousel) that is going to display the first section-a then section-b then section-c and we back to section-a and so on. I tried for many hours but I got stuck What do you think?
window.addEventListener('load', ()=> { const textEL = document.getElementsByClassName("text"); const showOne = document.getElementById("show-one"); const showTwo = document.getElementById("show-two"); const showTree = document.getElementById("show-tree"); delay = 500; const animation = ()=> { setTimeout(()=> { textEL[0].style.transform = "translate(0%)" }, delay) setTimeout(()=> { textEL[1].style.transform = "translate(0%)" }, delay * 2) setTimeout(()=> { textEL[2].style.transform = "translate(0%)" }, delay * 3) setTimeout(()=> { textEL[3].style.transform = "translate(0%)" }, delay * 4) setTimeout(()=> { showOne.style.opacity = "0" }, delay * 5) } animation(); // setInterval(animation, delay *6); });
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { margin: 0; background: #555; display: flex; justify-content: center; align-items: center; } .section-a { height: 100px; width: 90%; transition: 1.7s ease; margin: auto; position: relative; transform: translateX(0); } .text { color: #000000; margin: auto; font-size: 1.5rem; /*Animation*/ transition: all 0.75s ease; text-transform: uppercase; letter-spacing: 5px; font-weight: 800; text-align: center; transform: translateX(120%); }
<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"> <script src="./script.js" defer></script> <title>Real Slider</title> </head> <body> <div class="section-a" id="show-one" > <p class="text"> Knowledge is Power</p> <p class="text"> Power is Knowledge </p> <p class="text"> Get Educated </p> <p class="text"> Stay Positive </p> </div> <!-- <div class="section-b" id="show-two"> <p class="text"> Coding is a game</p> <p class="text"> Ride slow </p> <p class="text"> Get Educated </p> <p class="text"> Now or Never </p> </div> <div class="section-c" id="show-tree"> <p class="text"> Summer</p> <p class="text"> Power is Knowledge </p> <p class="text"> Get Educated </p> <p class="text"> Stay Positive </p> </div> --> </body> </html>
Advertisement
Answer
I made several changes to the CSS, HTML and especially to the Javascript. Adjust the timers considering my comments.
Note: remember that the animations made with the
setInterval
andsetTimeout
functions stop working when the page is no longer focused (if you change tabs for a few seconds and go back to the example you will see it). Check SO, for example here or here.
window.addEventListener('load', ()=> { var i = 0; var sections = document.getElementsByClassName("section"); var textEL = sections[i].getElementsByClassName("text"); var delay = 500; // setInterval doesn't start immediately, so the first animation call happens earlier. animation(); setInterval(function() { i++; if (i == sections.length) i = 0; animation(); }, delay * 15); function animation() { sections[i].style.opacity = "1"; textEL = sections[i].getElementsByClassName("text"); setTimeout(()=> { textEL[0].style.transform = "translate(0%)" }, delay) setTimeout(()=> { textEL[1].style.transform = "translate(0%)" }, delay * 2) setTimeout(()=> { textEL[2].style.transform = "translate(0%)" }, delay * 3) setTimeout(()=> { textEL[3].style.transform = "translate(0%)" }, delay * 4) // Hide texts after reading... delay*10 setTimeout(()=> { sections[i].style.opacity = "0"; }, delay * 10); // // Reset the translate for next cycle setTimeout(()=> { for (var t=0; t < textEL.length; t++) textEL[t].style.transform = "translate(calc(100vw))"; }, delay * 14); // Translate transition take 1.7s at least 2s delay from opacity=0 of section } });
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { margin: 0; background: #555; display: flex; justify-content: center; align-items: center; overflow-x: hidden; /* --> Remove horizontal scrollbar */ } .section { /* All sections, not only section-a */ position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; text-align: center; transition: 1.7s ease; transform: translateX(0); } /* .section-a { height: 100px; width: 90%; transition: 1.7s ease; margin: auto; position: relative; transform: translateX(0); } */ .text { color: #000000; margin: auto; font-size: 1.5rem; /*Animation*/ transition: all 0.75s ease; text-transform: uppercase; letter-spacing: 5px; font-weight: 800; text-align: center; transform: translateX(calc(100vw)); /* Start out of screen */ }
<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"> <script src="./script.js" defer></script> <title>Real Slider</title> </head> <body> <div class="section section-a" id="show-one" > <p class="text"> Knowledge is Power</p> <p class="text"> Power is Knowledge </p> <p class="text"> Get Educated </p> <p class="text"> Stay Positive </p> </div> <div class="section section-b" id="show-two"> <p class="text"> Coding is a game</p> <p class="text"> Ride slow </p> <p class="text"> Get Educated </p> <p class="text"> Now or Never </p> </div> <div class="section section-c" id="show-tree"> <p class="text"> Summer</p> <p class="text"> Power is Knowledge </p> <p class="text"> Get Educated </p> <p class="text"> Stay Positive </p> </div> </body> </html>