How to Built Dynamic Text Slider using JavaScript

Introduction

In this detailed blog post, we’ll explore the creation of a Dynamic Text Slider using HTML, CSS, and JavaScript. This interactive slider not only captivates users but also provides an elegant and dynamic way to present textual content. We’ll delve into each section of the code, elucidate the underlying logic, and guide you through the process of implementing this engaging feature on your website.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Text Slider</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" />
</head>
<body>
    <div class="text-slider" id="dynamicSlider">
        <div class="static-text">We excel at</div>
        <div class="dynamic-text" id="dynamicText"></div>
    </div> 
</body>
</html>

HTML

HTML Breakdown:

Application Wrapper: A container for the timer display.
Timer Display: Displays the current time in the “00:00” format.
Timer Container: A hidden container that appears when inactivity is detected.
Information Message: Displays relevant information such as exit confirmation.
Action Buttons: Buttons for resuming and exiting the timer.

CSS Styling

body {
    font-family: "Ubuntu", sans-serif;
    margin: 0 auto;
    background-color: #191a1e;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-slider {
    width: 600px;
    display: flex;
    gap: 15px;
    font-size: 30px;
}

.dynamic-text {
    display: flex;
    color: #0077ee;
    font-weight: 700;
}

.hidden {
    opacity: 0;
}

.text-animation {
    animation: fade 0.3s forwards;
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.holder-fade {
    animation: holderFade 4s;
}

@keyframes holderFade {
    0% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

CSS

CSS Highlights:

Global Styles: Sets global styles, including font-family and box-sizing.
Body Styles: Defines the background color for the body.
Application Wrapper Styles: Styles for the main application wrapper.
Timer Display Styles: Styles for the timer display.
Timer Container Styles: Styles for the container that appears when inactivity is detected.
Action Buttons Styles: Styles for the resume and exit buttons.
Hide Class: Defines the style for hiding elements.

JavaScript Logic

var sliderIndex = 0;
var sliderItems = [
    "Web Development",
    "WordPress Development",
    "App Development",
    "Plugin Development",
    "CRM Integrations",
];
var textSlider = document.querySelector("#dynamicSlider");
var dynamicTextElement = document.querySelector("#dynamicText");

function slideText() {
    if (sliderIndex >= sliderItems.length) {
        sliderIndex = 0;
    }

    dynamicTextElement.innerHTML = "";
    dynamicTextElement.classList.remove("holder-fade");
    void dynamicTextElement.offsetWidth;
    dynamicTextElement.classList.add("holder-fade");

    for (i = 0; i < sliderItems[sliderIndex].length; i++) {
        let letterDiv = document.createElement("div");
        letterDiv.innerHTML = sliderItems[sliderIndex][i];
        if (letterDiv.innerHTML == " ") {
            letterDiv.innerHTML = " ";
        }
        letterDiv.classList.add("hidden");
        letterDiv.classList.add("text-animation");
        letterDiv.style.animationDelay = i / 10 + "s";
        dynamicTextElement.appendChild(letterDiv);
    }

    sliderIndex++;
}

slideText();
setInterval(slideText, 4000);

JavaScript

JavaScript Breakdown:

Variable Initialization: Initializes variables for tracking time, inactivity status, and timer intervals.
Start Timer Function: Initiates the timer.
Event Listeners: Listens for user activity (mousemove, click, touch, keydown) and restarts the timer accordingly.
Resume Button Event: Handles the resume button click event.
Initialize Timer Function: Initializes or restarts the timer.
Exit Button Event: Handles the exit button click event.
Display Timer Function: Updates and displays the timer.

Conclusion

Incorporate this Dynamic Text Slider to elevate user engagement on your website. The synergy of HTML, CSS, and JavaScript results in a visually appealing and interactive element. Experiment with the code, customize the text, and enhance the styling to suit your unique requirements.

Happy coding!