28182 sujets

CSS et mise en forme, CSS3

[Résolu] Animation rotation de mots

Bonjour,

J'ai posté il a qq jours sur une rotation de mot que j'ai dû coder en html / css grâce à une démo trouvée en ligne. Mon client n'aime pas l'effet et voudrait l'effet de la vidéo ci-jointe :
https://www.loom.com/share/94a0c7db683848e389434c837eea2a76?sid=db5dfc74-7c0f-425e-9f52-743123c255e9

Merciiiiiiiii pour votre aide
Marine

Voici le code que j'ai fait initialement :


<section class="title-block">
<div class="rw-words rw-words-1">
<span style="font-weight: bold; color: #ff0799;">ÉMOTION</span>
<span style="font-weight: 400; color: #ff7607;">STORYTELLING</span>
<span style="font-weight: 900; color: #31c8d6;">CRÉATIFS</span>
<span style="font-weight: 600; color: #ff0799;">PASSIONNÉS</span>
<span style="font-weight: bold; color: #994dbc;">EXPERTISE</span>
</div>
</section>




.title-block {
   	width: 100%; 
}
.rw-words{
	display: inline-block;
	   	text-align: center;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	width: 96%;
    overflow: hidden;
	font-size: 100px;
}
.rw-words-1 span{
	animation: rotateWordsFirst 15s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
	animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
	animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
	animation-delay: 12s; 
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 100px; }
    19% { opacity: 1; height: 100px; }
	25% { opacity: 0; height: 100px; }
    100% { opacity: 0; }
}
Modérateur
Bonsoir,

ce que tu recherche ressemblerait à 
.rw-words {
  display: grid;
  text-align: center;
}
.rw-words span:nth-child(1n) {
  grid-row:1;
  grid-column:1;
  font-size: 100px;
  opacity:0;
  animation: hideShow 15s -15s linear infinite;
}

.rw-words span:nth-child(2) {
  animation: hideShow 15s -3s linear infinite;
}
.rw-words span:nth-child(3) {
  animation: hideShow 15s -6s linear infinite;
}
.rw-words span:nth-child(4) {
  animation: hideShow 15s -9s linear infinite;
}
.rw-words span:nth-child(5) {
  animation: hideShow 15s -12s linear infinite;
}

@keyframes hideShow {
  0%,80% {opacity:0}
  85%,100% {opacity:1}  
}



ou bien c'est l'opposé ?

Note le delay négatif de façon à ce que toutes les animations soit déjà en court au premier affichage.

Pour l'effet de transition , il faut entre la fin et le début de la prochaine étape une valeur légerement supérieur.
exemple : 

  from,80% {opacity:0}
  80.01%,to {opacity:1}

from et to sont des valeurs valides et facilite la lecture.


Cdt
Modifié par gcyrillus (10 Dec 2024 - 21:28)
Meilleure solution
Bonsoir @gcyrillus,

Ca me parait très bien, je valide ça avec mon client demain Smiley smile
Bonne soirée
Marine
connecté
Modérateur
Salut,

J'arrive après la bataille.... Un truc comme ça ? ¹²


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>slideshow</title>
        <style>
            body{
                box-sizing: border-box;
                font-family: sans-serif;
            }
            :root{
                --emotion: #ff0799;
                --storytelling: #ff7607;
                --creatifs: #31c8d6;
                --passionnes: #ff0799;
                --expertise: #994dbc;
            }
            @keyframes slideshow {  
                0% {
                    opacity: 0;
                    animation-timing-function: ease-in;
                }
                14.00% {
                    opacity: 1;
                    animation-timing-function: ease-out;
                }
                20.00% {
                    opacity: 1;
                }
                26.00% {
                    opacity: 0;
                }
                100% {
                    opacity: 0;
                }
            }
            .diapo {
                ul{
                    list-style: none;
                    margin: 0 auto;
                    padding: 0;
                    position: relative;
                    overflow: hidden;
                    width: 50%;
                    height: 80px;
                    backface-visibility: hidden;

                    li{
                        font-size: 6vw;
                        text-align: center;
                        font-weight: 600;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        animation: slideshow 10s linear infinite 0s;
                        opacity: 0;

                        &.emotion{
                            color: var(--emotion);
                            animation-delay: 0s;
                        }

                        &.storytelling{
                            color: var(--storytelling);
                            font-weight: 400;
                            animation-delay: 2s;
                        }

                        &.creatifs{
                            color: var(--creatifs);
                            font-weight: 900;
                            animation-delay: 4s;
                        }

                        &.passionnes{
                            color: var(--passionnes);
                            animation-delay: 6s;
                        }

                        &.expertise{
                            color: var(--expertise);
                            animation-delay: 8s;
                        }
                    }
                }
            }
        </style>
    </head>
    <body>
        <div class="diapo">
            <ul>
                <li class="emotion">ÉMOTION</li>
                <li class="storytelling">STORYTELLING</li>
                <li class="creatifs">CRÉATIFS</li>
                <li class="passionnes">PASSIONNÉS</li>
                <li class="expertise">EXPERTISE</li>
            </ul>
        </div>
    </body>
</html>


____
¹ capture vidéo du résultat
² css nesting : les anciens navigateurs n'aimeront pas cette syntaxe. Peut être que tu utilises le SASS. Dans ce cas, tu n'as qu'a reprendre l'arborescence tellequel. Sinon, tu vas devoir déplier les sélecteurs.
Modifié par niuxe (11 Dec 2024 - 11:12)
Prévenir un modérateur
Répondre au sujet
Aller à