Developpement web

Create a Floating Text Effect using HTML, CSS, and JS.

Developpement web

Create a Floating Text Effect using HTML, CSS, and JS.

Sommaire

Introduction

In this article, we will learn how to create a floating text effect using HTML, CSS, and JavaScript. This effect is achieved by animating each character of the text individually when hovered over.

Step 1: The HTML

We will start with the HTML structure. This code creates a page with a floating title:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Text Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 id="float-text">FLOAT TEXT</h1>
    </div>
   <script src="script.js"></script>
</body>
</html>

DOCTYPE and Language: We begin by defining the document type and language.
Meta Tags: We define the encoding and responsive view.
Title: We give a title to our page.
Link: We link our CSS file for styling.
Container and Title: We create a container div and an h1 title with the ID float-text.
Script: We link our JavaScript file at the end of the body to optimize loading.

Step 2: The CSS

Ensuite, nous allons ajouter le style nécessaire pour obtenir l’effet flottant.

  body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
}

#float-text {
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 100px;
}

#float-text span {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

#float-text span:hover {
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

Animated Background: Using a gradient with animation for the background.
Container: Center the content vertically and horizontally.
Floating Text: Basic styling for the text and individual characters with a transition and animation on hover.

Detailed Explanations:

Selecting the span:

  #float-text span {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

#float-text span: Selects all elements that are children of the element with the ID float-text.
display: inline-block: Allows elements to behave like blocks while still remaining on the same line. This enables transformations (like movement) to be applied without breaking the line of text.
transition: transform 0.3s ease-in-out: Adds a smooth transition to transformations on these elements. This means that any transformation applied (like a movement) will take 0.3 seconds with an ease-in-out effect.

Hover Effect:

  #float-text span:hover {
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
}

#float-text span:hover: Targets the elements when they are hovered over by the mouse.
animation: float 3s ease-in-out infinite: Applies the animation defined by @keyframes float for 3 seconds, with an ease-in-out effect, and loops infinitely.
cursor: pointer: Changes the cursor to a hand shape to indicate that the element is interactive.

Keyframes Animation:

  @keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes float: Defines an animation named float.
0%, 100% { transform: translateY(0); }: At the 0% (start) and 100% (end) positions of the animation, the elements are in their original position (no vertical movement).
50% { transform: translateY(-20px); }: At 50% of the animation (midpoint), the elements are moved up by 20 pixels.

To further customize your website, check out our guide on the LED light effect with JavaScript. This tutorial shows you how to enhance your website with attractive lighting effects.

Step 3: The JavaScript

Finally, we will add JavaScript to split the text into individual characters.

  document.addEventListener('DOMContentLoaded', function(){
    const text = document.getElementById('float-text');
    const textContent = text.textContent;
    text.innerHTML = '';
    textContent.split('').forEach(char => {
        const span = document.createElement('span');
        if(char === ' ') {
            span.innerHTML = ' ';
        } else {
            span.textContent = char;
        }
        text.appendChild(span);
    });
});

Detailed Explanations:

document.addEventListener('DOMContentLoaded', function(){ ... }): Adds an event listener that waits for the entire HTML document content to be fully loaded and parsed, without waiting for stylesheets, images, and sub-documents to finish loading. This ensures that the script runs only when the DOM is ready.

  document.addEventListener('DOMContentLoaded', function(){

Selecting the Text Element:

  const text = document.getElementById('float-text');

const text = document.getElementById('float-text');: Selects the HTML element with the ID float-text and stores it in the variable text.

Retrieving and Resetting the Text Content:

  const textContent = text.textContent;
text.innerHTML = '';

const textContent = text.textContent;: Retrieves the text content of the text element and stores it in the textContent variable.
text.innerHTML = '';: Empties the HTML content of the text element, preparing it to receive new elements.

Splitting the Text and Creating Elements: :

  textContent.split('').forEach(char => {
    const span = document.createElement('span');
    if (char === ' ') {
        span.innerHTML = ' ';
    } else {
        span.textContent = char;
    }
    text.appendChild(span);
});

textContent.split('').forEach(char => { ... });: Splits the text into individual characters and iterates over each one.
const span = document.createElement('span');: Creates a new element for each character.
if (char === ' ') { span.innerHTML = ' '; }: If the character is a space, it inserts a non-breaking space ( ) into the to preserve spaces.
else { span.textContent = char; }: Otherwise, place the character in the .
text.appendChild(span);: Adds the to the text element.

Summary

DOMContentLoaded: Ensures that the script runs once the DOM is fully loaded.
Selection of the element float-text: Retrieves the element containing the text to be animated.
Division and reset: The text content is divided into individual characters, and the float-text element is cleared.
Creation of elements: Each character (including non-breaking spaces) is wrapped in a element and added to float-text.

This setup allows the text to be split into individual characters, enabling the application of CSS animations to each character independently.

Conclusion

By following these steps, you can create an interactive and aesthetic floating text effect. Feel free to experiment with colors, fonts, and animations to customize the effect to your liking.

Share it