Create Auto Text Scroller Using jQuery And CSS3

by

In this tutorial I am going to share a simple jQuery and CSS3 based code snippet to Create Auto Text Scroller. It is a fast, performant, vertical text scroller that automatically scrolls through a group of paragraphs with scale & fade effects based on CSS3 animations.


Libraries

Include jQuery library on page.

HTML

Create a html div element and place multiple paragraph which need to auto scroll.

 

            
Auto animate lines
 
            
switches scale and oapcity 

            
clean and optimized code
 
            
loops the paragraph texts

            
Thank you ☺

CSS

Styling auto scroller scale & fade effects based on CSS3 animations.

 .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);



JS

The main function to animate the text scroller by adding/removing CSS classes. also Activate the text scroller and scroll through the text every 2 seconds using javascript setInterval function.

jQuery(document).ready(function($){

       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 );
           });
       }

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

    });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome code is developed by dpesofficial. Visit their official github repository for more information and follow for future updates.


Published by Rohit