Créer un Effet de Texte Flottant en HTML, CSS et JS

texte flottant

Créer un Effet de Texte Flottant en HTML, CSS et JS

Introduction

Dans cet article, nous allons apprendre à créer un effet de texte flottant en utilisant HTML, CSS et JavaScript. Cet effet est obtenu en animant chaque caractère du texte de manière individuelle lorsqu’on le survole.

Nous allons commencer par la structure HTML. Ce code crée une page avec un titre flottant.

				
					<!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 et Langue : On commence par définir le type de document et la langue.
  • Meta Tags : On définit l’encodage et la vue responsive.
  • Titre : On donne un titre à notre page.
  • Link : On lie notre fichier CSS pour le style.
  • Container et Titre : On crée une div container et un titre h1 avec l’ID float-text.
  • Script : On lie notre fichier JavaScript à la fin du corps pour optimiser le chargement.

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);
    }
}

				
			
  • Arrière-plan Animé : Utilisation d’un gradient avec une animation pour l’arrière-plan.
  • Container : Centrer le contenu verticalement et horizontalement.
  • Texte Flottant : Style de base pour le texte et les caractères individuels avec une transition et une animation au survol.

Explications Détaillées :

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

				
			
  • #float-text span : Sélectionne tous les éléments <span> qui sont enfants de l’élément avec l’ID float-text.
  • display: inline-block : Permet aux éléments <span> de se comporter comme des blocs tout en restant dans une ligne. Cela permet de leur appliquer des transformations (comme le déplacement) sans casser la ligne de texte.
  • transition: transform 0.3s ease-in-out : Ajoute une transition fluide aux transformations sur ces éléments. Cela signifie que toute transformation appliquée (comme un déplacement) prendra 0.3 secondes avec un effet d’accélération et de décélération.
				
					#float-text span:hover {
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
}

				
			
  • #float-text span:hover : Cible les éléments <span> lorsqu’ils sont survolés par la souris.
  • animation: float 3s ease-in-out infinite : Applique l’animation définie par @keyframes float pendant 3 secondes, avec un effet d’accélération et de décélération, et en boucle infinie.
  • cursor: pointer : Change le curseur en forme de main pour indiquer que l’élément est interactif.
				
					@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

				
			
  • @keyframes float : Définit une animation nommée float.
  • 0%, 100% { transform: translateY(0); } : Aux positions 0% (début) et 100% (fin) de l’animation, les éléments sont en position d’origine (pas de déplacement vertical).
  • 50% { transform: translateY(-20px); } : À 50% de l’animation (milieu), les éléments sont déplacés vers le haut de 20 pixels.

Pour aller plus loin dans la personnalisation de votre site web, consultez notre guide sur l'effet LED light avec JavaScript. Ce tutoriel vous montre comment dynamiser votre site web avec des effets lumineux attrayants.

Enfin, nous allons ajouter le JavaScript pour diviser le texte en caractères individuels.

				
					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 = '&nbsp;';
        } else {
            span.textContent = char;
        }
        text.appendChild(span);
    });
});

				
			

Explications Détaillées :

document.addEventListener('DOMContentLoaded', function(){ ... }) : Ajoute un écouteur d’événement qui attend que tout le contenu du document HTML soit complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents se chargent. Cela garantit que le script ne s’exécute que lorsque le DOM est prêt.
				
					document.addEventListener('DOMContentLoaded', function(){

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


				
			
const text = document.getElementById(‘float-text’); : Sélectionne l’élément HTML avec l’ID float-text et le stocke dans la variable text.
				
					const textContent = text.textContent;
text.innerHTML = '';

				
			
  • const textContent = text.textContent; : Récupère le contenu textuel de l’élément text et le stocke dans la variable textContent.
  • text.innerHTML = ''; : Vide le contenu HTML de l’élément text, le préparant à recevoir de nouveaux éléments <span>
				
					textContent.split('').forEach(char => {
    const span = document.createElement('span');
    if (char === ' ') {
        span.innerHTML = '&nbsp;';
    } else {
        span.textContent = char;
    }
    text.appendChild(span);
});

				
			
  • textContent.split('').forEach(char => { ... }); : Divise le texte en caractères individuels et itère sur chacun d’eux.
  • const span = document.createElement('span'); : Crée un nouvel élément <span> pour chaque caractère.
  • if (char === ' ') { span.innerHTML = '&nbsp;'; } : Si le caractère est un espace, insère un espace insécable (&nbsp;) dans le <span> pour préserver les espaces.
  • else { span.textContent = char; } : Sinon, place le caractère dans le <span>.
  • text.appendChild(span); : Ajoute le <span> à l’élément text.
  • DOMContentLoaded : Assure que le script s’exécute une fois que le DOM est entièrement chargé.
  • Sélection de l’élément float-text : Récupère l’élément contenant le texte à animer.
  • Division et réinitialisation : Le contenu textuel est divisé en caractères individuels et l’élément float-text est vidé.
  • Création des éléments <span> : Chaque caractère (y compris les espaces insécables) est enveloppé dans un élément <span> et ajouté à float-text.
Cette configuration permet de diviser le texte en caractères individuels, ce qui permet ensuite d’appliquer des animations CSS à chaque caractère indépendamment.

Conclusion

En suivant ces étapes, vous pouvez créer un effet de texte flottant interactif et esthétique. N’hésitez pas à expérimenter avec les couleurs, les polices et les animations pour personnaliser l’effet selon vos préférences.

error:
fr_FR