Home Web Design Text Animate On Scroll Using HTML CSS JavaScript | Divide Into Parts

Text Animate On Scroll Using HTML CSS JavaScript | Divide Into Parts

May 12, 2019

16669

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.

https://webdevtrick.com/wp-content/uploads/text-animate-on-scroll.mp4?_=1

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

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Animate Text on Scroll</title>

</head>

<body>

<span class="o">trick</span>

</div>

</body>

</html>

style.css

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

/** 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;
}

/** 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.

/** 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);

/** 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.

15 COMMENTS

matthew May 12, 2019 At 7:47 pm

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.

Reply
- shaan May 13, 2019 At 2:25 am
  
  First thanks for commenting, I always provide a simple program because I think people will understand.
  
  Reply
  - Manmohan kumar July 2, 2019 At 9:36 pm
    
    Hi shaan where did you learn javascript and css ,html etc just me source where I can learn this kind of advance propertys
    
    Reply
    - shaan July 3, 2019 At 1:31 am
      
      First I have learned all stuff from a profession in Delhi after that now I am learning from the internet.
      
      Reply
      - Manzi November 6, 2020 At 7:10 am
        
        Hello shaan can u use javascript instead
Christian May 12, 2019 At 9:23 pm

If you want to see it live:
https://codepen.io/ChristianFanning/pen/Ezyzjv

Reply
Christian May 12, 2019 At 9:25 pm

And thanks Shaan – great post

Reply
- shaan May 13, 2019 At 2:23 am
  
  Thank you very much, Stay Connected.
  
  Reply
Max May 13, 2019 At 11:28 am

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

Reply
- shaan May 13, 2019 At 2:27 pm
  
  This article is awesome, thanks for sharing.
  
  Reply
Akhil Raj May 13, 2019 At 12:28 pm

Hey shan is this your website ?

Reply
- shaan May 13, 2019 At 2:26 pm
  
  Yes bro
  
  Reply
club jeep aventure May 14, 2019 At 5:49 am

I am sure this article has touched all the internet people, its really really fastidious
piece of writing on building up new website.

Reply
- shaan May 14, 2019 At 7:51 am
  
  thank you 🙂
  
  Reply
routeripaddress.site May 19, 2019 At 7:31 am

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.

Reply