How to make text floating animation using Javascript Css and HTML

Posted By : Satyam Sharma | 17-Sep-2018

Introduction

In this blog, I will show you how to make a text floating animation using Javascript and HTML with the help of CSS.  As Surly you know, an animation plays an essential role in the creation of compelling web apps. Today, this is not even considered something special. Users are becoming more advanced by default expecting highly responsive and interactive user interfaces. 

The two primary way to create web animations is by using Javascript and CSS. There is no right or wrong choice; it all depends on what you are trying to achieve. 

Here I am showing a Text floating animation which can make your website more effective and also which will stand above the user's expectation.

Things which we need here.

1. HTML
2. CSS
3. Javascript

Here I am writing all code as in separate, which help you to understand the animation easy.

HTML

<body>
<ul class="floating text" id="float">
<li>H</li>
<li>E</li>
<li>L</li>
<li>L</li>
<li>O</li>
<li>&nbsp;</li>
<li>W</li>
<li>O</li>
<li>R</li>
<li>L</li>
<li>D</li>
</ul>
</body>


In this code, I have written a text in an unordered list with giving a class and also an id to the unordered list.


CSS

<style>
body {
    background: linear-gradient(180deg,blue,yellow,red);
}
.floating {
    list-style: none;
    position: absolute;
    top: 35%;
    left: 30%;
    background-color: transparent;	
}
.floating li {
    display: inline-block;
    font-size: 60px;
    font-family: sans-serif;
    font-style: italic;
    font-weight: 800;
    transition: all 2s linear;
    text-transform: uppercase;
    color: #3F51B5;
}
.floating.text li {
}
.floating.text li:nth-child(1) {
    transform: translate(-300px,-131px);
}
.floating.text li:nth-child(2) {
    transform: translate(160px,131px)
    
}
.floating.text li:nth-child(3) {
    transform: translate(160px,131px);
    
}
.floating.text li:nth-child(4) {
    transform: translate(-100px,-101px);
    
}
.floating.text li:nth-child(5) {
    transform: translate(100px,101px);
    
}
.floating.text li:nth-child(6) {
    transform: translate(160px,-131px);
    
}
.floating.text li:nth-child(7) {
    transform: translate(-160px,-131px);
    
}.floating.text li:nth-child(8) {
    transform: translate(50px,-131px);
    
}.floating.text li:nth-child(9) {
    transform: translate(-160px,50px);
    
}
.floating.text li:nth-child(10) {
    transform: translate(40px,56px);
    
}
.floating.text li:nth-child(11) {
    transform: translate(-40px,-131px);
    
}
.floating.text li:nth-child(12) {
    transform: translate(100px,-100px);
    
}
</style>

In this code, I have just defined specific letter to a specific position by giving a transform property to the title and also gave some CSS property to our ul class

 

Javascript

<body onload="floating_text">
<script>
function floating_text(){
var element = document.getElementById("float");
    element.classList.remove("text");

}

</script>


In our javascript code, I just defined a function which will be called when the body will be the load. For calling the function I have used here an onload event at the body.


Summary

In CSS, we set the element to the absolute position so that it “float up” and detach from the normal layout. With this, we can move the list element up and down by the “transform” CSS property.

In Javascript, we define a functions, floating_text() . In function, we use the javascript remove() method to our selecting list, and when the function calls it to remove the text class from the unordered list.

 

 

 

 

About Author

Author Image
Satyam Sharma

Satyam Sharma is a skilled full-stack developer, who loves to get new opportunities and learning about new technologies.

Request for Proposal

Name is required

Comment is required

Sending message..