3 votes

Effet simple d'effacement de texte pour streamlabs OBS en utilisant css et HTML

Tout le monde, je veux obtenir un effet simple d'effacement de texte en utilisant seulement CSS et HTML, j'ai un code très simple.
mon objectif est que le texte ne soit pas redimensionné lorsque la zone de texte se rétrécit, et c'est ainsi que je veux obtenir ce type d'effet d'effacement du texte. veuillez noter que j'ai besoin d'un fond totalement transparent parce que je veux l'utiliser comme une sous-alerte pour twitch. this type of wipe effect

Existe-t-il une option permettant au texte de rester à la position fixe (côté droit), et lorsque la zone de texte s'efface, il passe de gauche à droite.

.containner{
width: 200px;
height: 150px;
background-color:green;

overflow: hidden;
position: relative;

}
.innercon{
    right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/

}
@keyframes animaitonx{
    from{
        width: 200px;

    }
    to{
        width:0px;

    }
}
#copy{
    position: static;
}
.texttHolder{

    width:200px;
    text-align: right;

    color:red
}

<body onload="mainx()">
<div id="containner" class="containner">
    <div class="innercon">
        <div class="texttHolder" id="copy">
            here is your text
        </div>
        <div id="paste">

        </div>
    </div>

</div>

</body>

1voto

Manas Khandelwal Points 3055

Ces animations pourraient vous aider :

Codepen : https://codepen.io/manaskhandelwal1/pen/MWjqowM

.


D'abord :

h1#first {
  animation: textFade 5s ease infinite;
  width: fit-content;
  margin-bottom: 50px;
}

@keyframes textFade {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-110%);
    opacity: 0;
  }
}

<h1 id="first">Lorem ipsum dolor</h1>

Deuxièmement :

h1#second {
  width: fit-content;
  position: relative;
}

h1#second:before {
  content: "";
  position: absolute;
  background-color: white;
  width: 100%;
  animation: textFade2 5s ease infinite;
  height: 100%;
  box-shadow: 25px 0px 30px 10px #ffffff;
}

@keyframes textFade2 {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}

<h1 id="second">Lorem ipsum dolor</h1>

1voto

Temani Afif Points 69370

Un simple effet de masque peut le faire :

h1 {
  color: #fff;
  display: table;
  margin: 50px auto;
  font-family: sans-serif;
  font-size: 60px;
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #fff 60%);
  -webkit-mask-position: right;
  -webkit-mask-size: 250% 100%;
  animation: hide 2s linear forwards;
}

h1.opposite {
  -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 60%);
  animation-direction: reverse;
}

@keyframes hide {
  to {
    -webkit-mask-position: left;
  }
}

body {
  background: linear-gradient(to right, red, green);
}

<h1>A sample text</h1>

<h1 class="opposite">A sample text</h1>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X