How to Animate Text On Scroll Up & Down? Solution: Text Animate On Scroll Using HTML CSS JavaScript.

On some websites when you scroll there text become animated. Not only texts, many others thing like cards and images also become animated on the scroll in some sites. This type of effect is a good choice for the user interface, and the website looks very attractive.

So, Today I will show you a similar type of effect using HTML, CSS, and JavaScript. Today I am sharing Text Animate On Scroll program. Basically, in this program when you scroll down the text divide in parts, and on scroll up text rejoin.

This program is a very good example to understand how to create an effect on the scroll. If you are a beginner, you will also understand the whole program easily. These type of program basically created by jQuery but can create this program using JavaScript as well.

If you even don’t get what is the program or animation effect which I am talking about, you can see the preview given below.

Preview Of Text Divide Into Parts

In this video preview, you can see how this program looks like.

Now you can see how this program actually works. If you like this program, get the source code of it.

You May Also Like:

Text Animate On Scroll Source Code

Before sharing source code, I want to talk a little bit about this program. I had divided text in 4 parts, using 4 span tag. After that, I store parts of the text in JavaScript using const ( info )command. Then added some lines of codes for move text in parts in a different direction using JavaScript.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps for creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Animate Text on Scroll</title> <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="letters"> <span class="sc">web</span> <span class="r">dev</span> <span class="o">trick</span> <span class="ll">.com</span> </div> <script src="function.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> Animate Text on Scroll </title> <link href = "https://fonts.googleapis.com/css?family=Anton" rel = "stylesheet" > <link rel = "stylesheet" href = "style.css" > </head> <body> <div class = "letters" > <span class = "sc" > web </span> <span class = "r" > dev </span> <span class = "o" > trick </span> <span class = "ll" > .com </span> </div> <script src = "function.js" > </script> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css /** code by webdevtrick ( https://webdevtrick.com ) **/ body { margin: 0; height: 300vh; background: #333; font-family: 'Anton', sans-serif; overflow-x: hidden; } .letters { height: 100vh; display: flex; align-items: center; justify-content: center; color: crimson; font-size: 3.5rem; text-transform: uppercase; perspective: 1200px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /** code by webdevtrick ( https://webdevtrick.com ) **/ body { margin : 0 ; height : 300vh ; background : #333 ; font-family : 'Anton' , sans-serif ; overflow-x : hidden ; } .letters { height : 100vh ; display : flex ; align-items : center ; justify-content : center ; color : crimson ; font-size : 3.5rem ; text-transform : uppercase ; perspective : 1200px ; }

function.js

The final thing, Create a JavaScript file named ‘function.js‘ and put these codes.

function.js /** code by webdevtrick ( https://webdevtrick.com ) **/ const $ = document.querySelector.bind(document); const sc = $(".sc"); const r = $(".r"); const o = $(".o"); const ll = $(".ll"); function transformLetters() { const scroll = window.scrollY; // console.log({AmountScrolled: scroll}); sc.style.transform = `translate3d(0, ${scroll*1.4}px, 0) rotateY(${-scroll*0.03}deg)`; r.style.transform = `translate3d(${-scroll*0.45}px, ${scroll*0.95}px, 0) rotate(${-scroll*0.1}deg)`; o.style.transform = `translate3d(${scroll*0.65}px, ${scroll*1.05}px, 0) rotate(${scroll*0.2}deg)`; ll.style.transform = `translate3d(0, ${scroll*0.5}px, 0) rotateY(${scroll*0.04}deg)`; } window.addEventListener("scroll", transformLetters); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /** code by webdevtrick ( https://webdevtrick.com ) **/ const $ = document . querySelector . bind ( document ) ; const sc = $ ( ".sc" ) ; const r = $ ( ".r" ) ; const o = $ ( ".o" ) ; const ll = $ ( ".ll" ) ; function transformLetters ( ) { const scroll = window . scrollY ; // console.log({AmountScrolled: scroll}); sc . style . transform = ` translate3d ( 0 , $ { scroll * 1.4 } px , 0 ) rotateY ( $ { - scroll * 0.03 } deg ) ` ; r . style . transform = ` translate3d ( $ { - scroll * 0.45 } px , $ { scroll * 0.95 } px , 0 ) rotate ( $ { - scroll * 0.1 } deg ) ` ; o . style . transform = ` translate3d ( $ { scroll * 0.65 } px , $ { scroll * 1.05 } px , 0 ) rotate ( $ { scroll * 0.2 } deg ) ` ; ll . style . transform = ` translate3d ( 0 , $ { scroll * 0.5 } px , 0 ) rotateY ( $ { scroll * 0.04 } deg ) ` ; } window . addEventListener ( "scroll" , transformLetters ) ;

That’s It. Now you have successfully created Text Animate On Scroll Program Using HTML CSS JavaScript. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.