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.
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.
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.
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.
Hey, it’s cool you’re providing tricks and stuff like this, but most people aren’t actually learning, they’re just copy-pasting. Maybe go into more depth with the code and people will learn something new.
First thanks for commenting, I always provide a simple program because I think people will understand.
Hi shaan where did you learn javascript and css ,html etc just me source where I can learn this kind of advance propertys
First I have learned all stuff from a profession in Delhi after that now I am learning from the internet.
Hello shaan can u use javascript instead
If you want to see it live:
https://codepen.io/ChristianFanning/pen/Ezyzjv
And thanks Shaan – great post
Thank you very much, Stay Connected.
Hi shaan, great piece!
I think that the biggest challenge is to find the right implementation to it. Let me know if you’ll find it useful:
https://medium.com/plux-playful-user-experience/plux-turning-art-into-practical-web-design-interactive-art-meets-business-driven-ux-8bad83f27034
This article is awesome, thanks for sharing.
Hey shan is this your website ?
Yes bro
I am sure this article has touched all the internet people, its really really fastidious
piece of writing on building up new website.
thank you 🙂
It’s actually very difficult in this busy life to listen news on TV, so I only use internet for that purpose, and obtain the hottest information.