Animated Text Slider Using JavaScript

This code creates an animated text slider using JavaScript. It displays various content in a slideshow format. The `slide()` function manages the animation. It’s helpful for engagingly showcasing multiple messages or highlights.

You can use this code on your website’s homepage to showcase key services or features. It adds visual appeal and interactivity, making your site more engaging. This can help attract and retain visitors, improving overall user experience and potentially boosting conversions.

How to Create Animated Text Slider Using Javascript

1. First of all, load the Google Fonts by adding the following CDN links into the head tag of your HTML document.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap" rel="stylesheet">

2. Set up the HTML structure for the slider. Include a div element with an id of slider, where the text will be displayed.

<!-- Tutorial: https://youtu.be/Wxnpze5LK3Y -->
<div id="slider">
  <div class="span">We excel at</div>
  <div class="span" id="sliderValue"></div>
</div>

<div class="youtube">
  <style>
    .youtube {
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      color: white;
      left: auto;
      right: auto;
      margin: 0 auto;
      text-align: center;
      padding: 20px 50px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      font-weight: 700;
      color: #0077ee !important;
    }
  </style>
  
</div>

3. Apply styles to your slider using CSS to enhance its appearance and animation.

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

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

#sliderValue {
  display: flex;
  color: #0077ee;
    font-weight: 700;
}

.start {
  opacity: 0;
}

.animation {
  animation: fade .3s forwards;
}


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

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

@keyframes holder {
  0%{
    opacity: 1;
  }
  95%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

4. Now, let’s add JavaScript to make the slider functional. We’ll create a function called slide() that manages the animation and text content. Customize the content of the slider by modifying the sliderContent array in the JavaScript code. This array contains the messages or highlights that will be displayed in the slider.

// Tutorial: https://youtu.be/Wxnpze5LK3Y

var sliderCounter = 0;
var sliderContent = [
  "Web Development",
  "WordPress Development",
  "App Development",
  "Plugin Development",
  "CRM Integrations"
];
var slider = document.querySelector("#slider");
var sliderValue = document.querySelector("#sliderValue");

function slide() {
  if (sliderCounter >= sliderContent.length) {
    sliderCounter = 0;
  }

  sliderValue.innerHTML = "";
  
  sliderValue.classList.remove("holder-animation");
  void sliderValue.offsetWidth;
  sliderValue.classList.add("holder-animation");
  
  for (i = 0; i < sliderContent[sliderCounter].length; i++) {
    let letterDiv = document.createElement("div");
    letterDiv.innerHTML = sliderContent[sliderCounter][i];

    if (letterDiv.innerHTML == " ") {
      letterDiv.innerHTML = "&nbsp;";
    }
    letterDiv.classList.add("start");
    letterDiv.classList.add("animation");
    letterDiv.style.animationDelay = i / 10 + "s";
    sliderValue.appendChild(letterDiv);
  }

  sliderCounter++;
}

slide();
setInterval(slide, 4000);

That’s all! hopefully, you have successfully created an Animated Text Slider Using JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.