Forum : Effet de texte CSS

Bonjour à tous,

Je cherche à créer un effet de texte à l'entrée sur le site et j'ai un bout de code mais je n'arrive pas à l'activer pour qu'il soit effectif dès qu'on entre sur le site. (je suis dans mes débuts d'apprentissage de code HTML et CSS, et je travaille sur Elementor)


<span class="blur-in" style="color:inherit; filter: blur(6px); transition-duration: 1.908s!important; transition-delay: 0.297s!important;">are</span>```

**Ce que je veux**

Je cherche à obtenir le même effet d'entrée que sur ce site : https://mindcanopy.com (la citation sur fond noir "people are capable, at any time of their live, of doing what they dream of") 

**Ce que j'obtiens**
Lorsque je copie colle le code dans mon CSS personnalisé (Elementor) j'obtiens un texte flou statique, qui ne fait aucun mouvement pour revenir à la normale. J'aimerais vraiment pouvoir reproduire cet effet, si c'est possible de m'expliquer comment je peux y arriver? Merci infiniment pour votre indulgence et votre aide!

popotte

Hello, alors les transitions se font avec un event (hover, active, etc...) dans ton cas tu veux que le texte s'affiche au chargement de la page, donc tu devrait utiliser une animation à la place

/** Active l'animation show_text qui fait apparaitre le texte dans une duree de 1.908s après 0.297s, le forward c'est pour que à la fin de l'animation le texte reste en place */

.blur-in {
    animation: show_text 1908ms;
    animation-delay: 297ms;
    animation-fill-mode: forwards;
}

@keyframe show_text {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

KamiZray

Auteur

Hello Popotte,

Merci pour ta réponse!
J'ai essayé de coller le code que tu m'as envoyé mais cela ne marche toujours pas. La partie "@keyframe show_text" n'est pas reconnu par Elementor... Et comme je débute tout juste, il y a des choses que je ne comprends pas. Je m'y prends sûrement mal...

popotte

oups mauvaise orthographe ^^'

c'est @keyframes avec un s ^^'

KamiZray

Auteur

Hello Popotte,

Merci pour ton aide!
Pour activer l'animation, j'ai besoin de la classe CSS (comme je travaille sur Elementor), je mets "blur-in" en classe du coup?

Merci encore

popotte

De rien ;)

Alors en gros une class c'est un pointeur vers un élement, ton élement à la class blur-in <span class="blur-in"></span> alors oui tu mets blur-in ^^

Et ça ne concerne pas seulement Elementor, c'est necessaire dans le CSS de pointer une class avec ou sans Elementor :p

KamiZray

Auteur

Je viens d'essayer et ça ne marche toujours pas :( je suis désespérée...

(d'accord pour le CSS, je ne savais pas ^^)

KamiZray

Auteur

Alors je viens de réessayer, ça marche mais le soucis c'est que ça me fait un rendu de fade-in de toute la phrase, alors que sur l'example que j'aimerais pouvoir reproduire le fade-in se fait progressivement sur chaque mot, je sais pas si tu vois ce que je veux dire ^^

popotte

Mmmh okay je vois le truc

Alors il faudrait que tu fasse un truc dans ce genre:

<span class="blur-in-1">Mot 1</span>
<span class="blur-in-2">Mot 2</span>
<span class="blur-in-3">Mot 3</span>

.blur-in-1 {
    animation: show_text 1908ms;
    animation-delay: 297ms;
    animation-fill-mode: forwards
}

.blur-in-2 {
    animation: show_text 1908ms;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
}

.blur-in-3 {
    animation: show_text 1908ms;
    animation-delay: 700ms;
    animation-fill-mode: forwards;
}

La ça devrait être mieux :)

KamiZray

Auteur

Merci Popotte!
Je pense que ça marcherait si Elementor ne nous limitait pas à une seule CSS class par élément... :(
Pas grave... en tout cas merci infiniment pour ton aide précieuse

popotte

Justement dans ce cas la tu n'as qu'une class CSS par élément, le truc c'est de faire un élément par mot, un élément aura blur-in-1, un AUTRE élément aura blur-in-2, et un TROISIEME element aura blur-in-3 ^^

Si vraiment c'et impossible, tu peux faire du JS en elementor?

KamiZray

Auteur

Il me semble que c'est possible de faire du JS sur Elementor avec un plugin spécial

Effet de texte CSS

11 réponses