Learn how to create word falling effect in javascript.
With this many words fall at different interval on the screen and create the falling effect.
As you can see in the above image I have arranged different words in the U format to support all the developers who are working hard.
By building this you will learn.
- HTML:- Create the layout to form an alphabet.
- CSS:- Arrange elements to create an alphabet, working with perspective and its origin and how to create fall effect of anything.
- Javascript:- Use of Settimeout function.
The majority of thing that you will learn by building this is of CSS.
We will first create the layout of the elements containing different words with HTML and then arrange them with CSS.
Lets start building it.
Create the HTML layout of words
As we have to arrange different words to form an alphabet we will have to place the different words inside a wrapper so that it can be rearranged.
<div id="words-wrapper">
<span class="word horizontal" style="
top: 98px;
font-size: 22px;
left: 90px;
transition-delay: 1.75s;
">
#100DaysOfCode
</span>
<span class="word horizontal" style="
top: 93px;
font-size: 22px;
left: 18px;
transition-delay: 0.25s;
">dedication</span>
<span class="word" style="
font-size: 47px;
top: 142px;
left: 56px;
transition-delay: 2.75s;
">work</span>
<span class="word" style="
top: 26px;
left: 58px;
font-size: 24px;
transition-delay: 0.5s;
">hard work</span>
<span class="word" style="
top: 400px;
left: 16px;
font-size: 48px;
transition-delay: 2.25s;
">HTML</span>
<span class="word" style="
top: 400px;
left: 388px;
font-size: 48px;
transition-delay: 1.15s;
">CSS</span>
<span class="word horizontal" style="
top: 229px;
left: 55px;
font-size: 23px;
text-transform: capitalize;
transition-delay: 1s;
">simplicity</span>
<span class="word horizontal" style="
top: 70px;
left: 66px;
font-size: 40px;
transition-delay: 1.35s;
">Jazz</span>
<span class="word horizontal" style="
top: 77px;
left: 90px;
font-size: 40px;
transition-delay: 1.95s;
">100%</span>
<span class="word" style="
top: 290px;
left: 83px;
font-size: 42px;
text-transform: capitalize;
transition-delay: 0.55s;
">Duo</span>
<span class="word horizontal" style="
top: 229px;
left: 87px;
font-size: 31px;
text-transform: capitalize;
transition-delay: 2.95s;
">Message</span>
<span class="word horizontal" style="
top: 250px;
left: -5px;
font-size: 29px;
text-transform: capitalize;
transition-delay: 0.35s;
">Minimalism</span>
<span class="word horizontal" style="
top: 363px;
left: 137px;
font-size: 27px;
text-transform: capitalize;
transition-delay: 2.15s;
">Music</span>
<span class="word" style="
top: 323px;
left: 284px;
font-size: 24px;
text-transform: capitalize;
transition-delay: 2.75s;
">Stay In</span>
<span class="word" style="
top: 318px;
left: 190px;
font-size: 29px;
text-transform: capitalize;
transition-delay: 3s;
">Passion</span>
<span class="word" style="
top: 132px;
left: 87px;
font-size: 22px;
transition-delay: 1.9s;
">hi</span>
<span class="word" style="
top: 388px;
left: 190px;
font-size: 23px;
text-transform: uppercase;
transition-delay: 2.25s;
">Hello World</span>
<span class="word horizontal" style="
top: 357px;
left: 295px;
font-size: 23px;
text-transform: uppercase;
transition-delay: 1.45s;
">UI</span>
<span class="word horizontal" style="
top: 357px;
left: 320px;
font-size: 23px;
text-transform: uppercase;
transition-delay: 2.55s;
">UX</span>
<span class="word" style="
top: 380px;
left: 400px;
font-size: 22px;
transition-delay: 2.355s;
">Success</span>
<span class="word" style="
top: 357px;
left: 190px;
font-size: 23px;
text-transform: uppercase;
transition-delay: 0.65s;
">Dribble</span>
<span class="word horizontal" style="
top: 282px;
left: 403px;
font-size: 33px;
transition-delay: 2.95s;
">Codepen</span>
<span class="word horizontal" style="
top: 115px;
left: 326px;
font-size: 45px;
transition-delay: 1.28s;
">React</span>
<span class="word horizontal" style="
top: 100px;
left: -63px;
font-size: 50px;
transition-delay: 2.45s;
">Javascript</span>
<span class="word horizontal" style="
top: 325px;
left: 374px;
font-size: 25px;
transition-delay: 2.5s;
">Nodejs</span>
<span class="word" style="
top: 357px;
left: 425px;
font-size: 25px;
transition-delay: 0.38s;
">Vue</span>
<span class="word" style="
top: 29px;
left: 360px;
font-size: 25px;
transition-delay: 0.98s;
">Angular</span>
<span class="word horizontal" style="
top: 92px;
font-size: 53px;
left: 408px;
transition-delay: 1.75s;
">Software</span>
<span class="word horizontal" style="
top: 318px;
font-size: 38px;
left: 392px;
transition-delay: 1.35s;
">#codeNewbie</span>
<span class="word horizontal" style="
top: 192px;
font-size: 19px;
left: 406px;
transition-delay: 1.15s;
">Modern</span>
<span class="word horizontal" style="
top: 117px;
font-size: 18px;
left: 400px;
transition-delay: 1.45s;
">Curiosity</span>
<span class="word" style="
top: 415px;
left: 160px;
font-size: 33px;
transition-delay: 1.3s;
">Perfection</span>
<span class="word horizontal" style="
top: 364px;
left: 314px;
font-size: 37px;
transition-delay: 0.75s;
">Flexbox</span>
<span class="word" style="
top: 420px;
left: 303px;
font-size: 27px;
transition-delay: 0.85s;
">Grid</span>
<span class="word" style="
top: 328px;
left: 50px;
font-size: 70px;
text-transform: capitalize;
transition-delay: 1s;
">div</span>
<span class="word horizontal" style="
top: 249px;
left: 104px;
font-size: 32px;
transition-delay: 1.2s;
">Inspiration</span>
<span class="word horizontal" style="
top: 262px;
font-size: 19px;
left: 404px;
transition-delay: 0.75s;
">Creative</span>
<span class="word horizontal" style="
top: 202px;
font-size: 19px;
left: 436px;
transition-delay: 0.75s;
">Color</span>
<span class="word horizontal" style="
top: 327px;
font-size: 13px;
left: 414px;
transition-delay: 0.75s;
">RGBA</span>
<span class="word horizontal" style="
top: 300px;
left: -47px;
font-size: 33px;
transition-delay: 1.25s;
">Imagination</span>
<span class="word horizontal" style="
top: 243px;
font-size: 26px;
left: 312px;
transition-delay: 1s;
">Technology</span>
<span class="word" style="
top: 55px;
font-size: 33px;
left: 358px;
transition-delay: 1.25s;
">Tweet</span>
<span class="word horizontal" style="
top: 181px;
font-size: 26px;
left: 311px;
transition-delay: 1.66s;
">#womenWhoCode</span>
<span class="word horizontal" style="
top: 80px;
font-size: 46px;
left: 382px;
transition-delay: 2.4s;
">WebDev</span>
</div>
Arranging the words with CSS to create an alphabet.
If you have noticed I have given inline styles to all the elements because it will be really bad thing to give different class or use selector for each word and then assign CSS to them.
All these words are positioned absolute to the parent and with the help of their top and left properties they are positioned to different places to form the alphabet.
Some elements also contains the horizontal class which rotates them by 90deg.
Now to create the falling effect we have used the transform property.
There is a method called translateZ which moves the element towards screen and gives it 3D effect.
Imaging a plane where there are three dimensions X, Y, and Z. Now X and Y defines the width and height of the plane and Z defines the depth.
So using translateZ we pull the elements from its base towards upward and then when window is loaded we change it 0 which shows that words are falling.
How things are falling depends upon the perspective of the viewer. To show that things are falling from top to the bottom we can set the perspective of things when they are being transitioned with perspective and perspective-origin property.
The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
The perspective-origin property defines at from which position the user is looking at the 3D-positioned element.
Also we will be using transform-origin property which allows you to change the position of transformed elements.
You can learn more about perspective at MDN.
The value of translateZ(Xpx) decides its position on the screen. X == 0 is on the screen and then X > 0 is above the screen and X < 0 is below the screen.
Initially we have kept this value to 1500px and then change it to 0.
If you notice that all the words in the HTML have transition-delay property which decides after how many milliseconds of delay the transition will start. This helps to show that different words are falling at different intervals.
//Wrapper which has the perspective
#words-wrapper {
position: absolute;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 500px;
perspective: 500px;
width: 500px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
}
//Word
.word {
position: absolute;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translateZ(1500px);
transform: translateZ(1500px);
-webkit-transition: -webkit-transform 1.9s
cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: transform 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
//Rotate words by 90deg
.horizontal {
transform: translateZ(1500px) rotate(90deg);
-webkit-transform: translateZ(1500px) rotate(90deg);
}
//Show normal words
.word.show {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
//Show rotated words
.word.horizontal.show {
-webkit-transform: translateZ(0) rotate(90deg);
transform: translateZ(0) rotate(90deg);
}
Showing word falling effect with javascript
When the document is loaded properly add the show class to all the words to start the falling of words.
I have done this after 1 second of delay to give the feel that things are getting ready, but you can do it as per your need.
//All words node
const words = document.querySelectorAll(".word");
//Start the falling effect after 1.5 seconds
setTimeout(() => {
//Add show class to each word
words.forEach((e) => {
e.classList.add("show");
});
}, 1500);
I hope 🙏🏻 you have learned something today.
