wake-up-neo.net

CSS-Übergangsbreite von rechts nach links

Ich habe eine Überschrift (das Wort Welcome) erstellt, die sich zeigt, sobald die Seite geladen wurde (onload="").

Fiddle falls der Code unten nicht funktioniert.

function animate() {
  document.getElementById("mainText").style.width = "100%";

}
#mainText {
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  width: 0%;
  transition: width 2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
<body onload="animate()">
  <h1 id="mainText">Welcome</h1>
</body>

CSS und Plain JS funktionieren gut, aber ich möchte, dass das Wort "Welcome" zuerst auf der rechten Seite sichtbar wird und dann weitergeht, also vom e zum W, anstatt wie es momentan ist, was sich von links nach rechts öffnet.

Ich habe text align: right; ausprobiert, aber das ändert nichts.

Ich möchte vorzugsweise keine jQuery verwenden, wenn die Lösung eine JS-Lösung ist.

Ein Beispiel, wie das gewünschte Aussehen aussehen soll, auf halbem Weg nach dem Übergang:

5
Oliver Murfett

Ja, es ist möglich mit Übergängen und Positionen:

window.onload = function () {
  document.querySelector("h1").classList.add("active");
};
h1 {
  overflow: hidden;
  display: inline-block;
  position: relative;
}
h1 .mask {
  position: absolute;
  transition: all 0.5s linear;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
h1.active .mask {
  right: 100%;
}
<h1><span class="mask"></span>Welcome</h1>

Ich habe gerade einen Artikel darüber geschrieben - CSS-Übergänge & JavaScript für animierte Eingabeeffekte . Ich hoffe es ist nützlich ... :)

Sie können die Eigenschaft clip-path verwenden, um Teile des Elements so zu beschneiden, dass sie nicht sichtbar sind. Diese Eigenschaft kann auch animiert werden, um das Element erneut anzuzeigen. Verwenden Sie dazu das Schlüsselwort forwards in der Animation, damit es im Endzustand bleibt.

Die Variable inset nimmt Werte in der Reihenfolge an: von oben, von rechts, von unten, von links.

#text {
  margin: 0;
  font-size: 100px;
  animation: reveal 2s forwards;
}

@keyframes reveal {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
<h1 id="text">Welcome</h1>

4
Jon Koops

Eine Option ist transform: translate mit einem Pseudoelement, und es ist kein zusätzliches Element erforderlich.

function animate() {
  document.getElementById("mainText").classList.add('show');
}
#mainText {
  position: relative;
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  white-space: nowrap;
  text-overflow: clip;
  overflow: hidden;
}
#mainText::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: white;
  transition: transform 2s;
}
#mainText.show::after {
  transform: translateX(-100%);
}
<body onload="animate()">

    <h1 id="mainText">Welcome</h1>
    
</body>


Eine weitere Option, eine noch bessere Lösung, die das Pseudo mit direction und left/width verwendet. 

Dies funktioniert auf die gleiche Art und Weise, clip-path, vollständig transparent gegenüber dem Hintergrund, im Gegensatz zu einer Maske, die den Text revelliert, und mit einer viel besseren Browserunterstützung.

function animate() {
  document.getElementById("mainText").classList.add('show');
}
body {
  background: black;
}
#mainText {
  position: relative;
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0);
}
#mainText::before {
  content: attr(data-text);
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 100%;
  color: white;
  direction: rtl;
  overflow: hidden;
  transition: left 2s, width 2s;
}
#mainText.show::before {
  left: 0;
  width: 100%;
}
<body onload="animate()">

  <h1 id="mainText" data-text="Welcome">Welcome</h1>

</body>

3
LGSon

Etwas wie das

function animate() {
  document.getElementById("overlay").style.width = "0%";

}
#mainText {
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
#overlay{
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background:#fff;
  transition: width 2s;
  height:100%;
}
<body onload="animate()">
  <h1 id="mainText">Welcome</h1>
  <div id="overlay"></div>
</body>

2
Abhishek Pandey

Ich benutze Transform: translateX, um den gewünschten Effekt zu erzielen. 

Es gleitet den Text seitlich oder horizontal auf der X-Achse. 

.message {
  color: darkred;
  font-size: 30px;
  display: inline-block;
  font-weight: 100;
  font-family: sans-serif;
}

.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.sliding-text-2 {
  animation-delay: 2s;
  color: darkblue;
}

.sliding-text-3 {
  animation-delay: 4s;
  color: darkgreen;
}

@keyframes slide {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
<h1 class="message sliding-text-1">Hello!</h1>
<h1 class="message sliding-text-2">Thanks for visiting!</h1>
<h1 class="message sliding-text-3">Have a Nice day!</h1>

0
I haz kode

Dazu wird ein Pseudoelement mit Hintergrund als Überschrift als Überschrift benötigt. Anstatt die Inline-Stile zu ändern, füge ich einfach eine Klasse is-active hinzu. Alles, was mit Stil zu tun hat, kann über CSS gestaltet werden.

function animate() {
  document.getElementById("mainText").className = "is-active";
}
#mainText {
  margin: 0px;
  display: inline-block;
  position: relative;
  font-size: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

#mainText:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #FFF;
  transition: width 2s;
}

#mainText.is-active:before {
  width: 0%;
}
<body onload="animate()">
  <h1 id="mainText">Welcome</h1>
</body>

0
AlexG