Auto Text Scroller With jQuery And CSS3

A fast, performant, vertical text scroller that automatically scrolls through a group of paragraphs with scale & fade effects based on CSS3 animations.

How to use it:

1. Insert the text into the scroller.

<div class="dp-scroll-wrapper">
  <div class="dp-scroll-text">
    <p class="dp-animate-hide">SCROLLER TEXT 1</p> 
    <p class="dp-run-script dp-animate-1">SCROLLER TEXT 2</p>
    <p class="dp-run-script dp-animate-2">SCROLLER TEXT 3</p> 
    <p class="dp-run-script dp-animate-3">SCROLLER TEXT 4</p>
    <p class="dp-run-script dp-animate-4">SCROLLER TEXT 5</p>                    
  </div>
</div>

2. The CSS/CSS3 rules for the text scroller.

.dp-scroll-wrapper {
  position: fixed;
  width: 100%;
  top: 100px;
  left: 0;
  margin-left: 0;
  z-index: 9999;
}

.dp-scroll-text p {
  margin: 0px;
  font-size: 60px;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  opacity: 0;
  margin-top: 0;
  text-transform: capitalize;
}

.dp-scroll-text { height: 350px; }

body { background: #ef5350; }

.dp-scroll-text :nth-child(1) {
  opacity: 1;
  transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);
}

.dp-scroll-text :nth-child(2) {
  opacity: 0.75;
  transform: translate(0%, 100%) matrix(0.9, 0, 0, 0.9, 0, 0);
}

.dp-scroll-text :nth-child(3) {
  opacity: 0.5;
  transform: translate(0%, 200%) matrix(0.8, 0, 0, 0.8, 0, 0) scale(0.8, 0.8);
}

.dp-scroll-text :nth-child(4) {
  opacity: 0.25;
  transform: translate(0%, 300%) matrix(0.7, 0, 0, 0.7, 0, 0) scale(0.7, 0.7);
}

.dp-scroll-text :nth-child(5) {
  opacity: 0;
  transform: translate(0%, 400%) matrix(0.5, 0, 0, 0.5, 0, 0);
}

.dp-animate-hide,  .dp-animate-1,  .dp-animate-2,  .dp-animate-3,  .dp-animate-4 {
  opacity: 1;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.dp-scroll-text .dp-animate-hide { animation-name: movehide; }

.dp-scroll-text .dp-animate-1 { animation-name: move1; }

.dp-scroll-text .dp-animate-2 { animation-name: move2; }

.dp-scroll-text .dp-animate-3 { animation-name: move3; }

.dp-scroll-text .dp-animate-4 { animation-name: move4; }

@keyframes 
movehide {  100% {
 opacity: 0;
transform: translate(0%, -165%) matrix(1.2, 0, 0, 1.2, 0, 0);
}
}

@keyframes 
move1 {  100% {
 opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
}
}

@keyframes 
move2 {  100% {
 opacity: 0.75;
transform: translate(0%, 100%) matrix(0.9, 0, 0, 0.9, 0, 0);
}
}

@keyframes 
move3 {  100% {
 opacity: 0.5;
transform: translate(0%, 200%) matrix(0.7, 0, 0, 0.7, 0, 0);
}
}

@keyframes 
move4 {  100% {
 opacity: 0.25;
transform: translate(0%, 300%) matrix(0.5, 0, 0, 0.5, 0, 0);
}
}

3. Insert the latest version of jQuery library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

4. The main function to animate the text scroller by adding/removing CSS classes.

function dp_scroll_text(){ 
   $(".dp-animate-hide").appendTo(".dp-scroll-text").removeClass("dp-animate-hide");
   $(".dp-scroll-text p:first-child").removeClass("dp-run-script dp-animate-1").addClass("dp-animate-hide");
   $("p.dp-run-script.dp-animate-4").next().addClass("dp-run-script dp-animate-4");
   $(".dp-run-script").removeClass("dp-animate-1 dp-animate-2 dp-animate-3 dp-animate-4");

   $.each($('.dp-run-script'), function (index, runscript) {
      index++;
      $(runscript).addClass('dp-animate-' + index );
   });
}

5. Activate the text scroller and scroll through the text every 2 seconds.

setInterval(function(){ 
  dp_scroll_text()
}, 2000);

About Author:

Author: Dipesh Thapa

Website: https://dpesofficial.github.io/Auto-Text-Scroll/

---

This awesome jQuery plugin is developed by dpesofficial. For more Advanced Usages, please check the demo page or visit the official website.