Create Auto Text Scroller Using jQuery And CSS3
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
HTML
Create a html div element and place multiple paragraph which need to auto scroll.
<div class="dp-scroll-text"> <p class="dp-animate-hide">Auto animate lines</p> <p class="dp-run-script dp-animate-1">switches scale and oapcity </p> <p class="dp-run-script dp-animate-2">clean and optimized code</p> <p class="dp-run-script dp-animate-3">loops the paragraph texts</p> <p class="dp-run-script dp-animate-4">Thank you ☺</p> </div> |
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.