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> </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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Satyam Sharma
Satyam Sharma is a skilled full-stack developer, who loves to get new opportunities and learning about new technologies.