Animated Text Slider Using JavaScript

Animated Text Slider Using JavaScript
Code Snippet:Service Slider
Author: Adam Curzon
Published: March 22, 2024
Last Updated: March 22, 2024
Downloads: 50
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X