13/05/2019
Text Animate on Scroll
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.
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.
Create an HTML file named ‘index.html‘ and put these codes given here below.
index.html
Animate Text on Scroll
Ashu
tosh
To
mar
Now create a CSS file named ‘style.css‘ and put these codes.
style.cssCSS
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;
}
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;
}
The final thing, Create a JavaScript file named ‘function.js‘ and put these codes.
function.jsJavaScript
/** function for scroll text **/
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);
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.
