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.
Floating Text Effect
FLOAT TEXT
container
et un titre h1
avec l’ID float-text
.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);
}
}
#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 = ' ';
} else {
span.textContent = char;
}
text.appendChild(span);
});
});
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 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 = ' ';
} 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 = ' '; }
: Si le caractère est un espace, insère un espace insécable (
) 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é.float-text
: Récupère l’élément contenant le texte à animer.float-text
est vidé.<span>
: Chaque caractère (y compris les espaces insécables) est enveloppé dans un élément <span>
et ajouté à float-text
.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.
Mondesign Web votre agence marketing digital, dédiée à vous accompagner vers le sommet de votre succès en ligne.