JavaScript Text animation?

Hi,

ich will so eine Text-Animation auf einer Seite, wo Zitate durch die Seite gehen. Von Links nach rechts. Wenn das jeweilige Zitat dann auf der rechten Seite der Seite angekommen ist, sollte es wieder auf der linken Seite erscheinen. Hat jemand eine Idee wie man das machen könnte? Ich habe es mit "Keyframes" in "Css" ausprobiert, aber wenn ich mehrere Zitate mit unterschiedlicher Länge benutze, verändert sich das Tempo der jeweiligen Sätze, obwohl ich die "animation-duration" festgelegt habe.

Vielen Dank für Eure Hilfe!

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

01.04.2022, 04:08

(...) wenn ich mehrere Zitate mit unterschiedlicher Länge benutze, verändert sich das Tempo der jeweiligen Sätze, (...)

Das klingt logisch. Immerhin braucht ein langer Satz mehr Zeit, um über die Bildfläche zu laufen, als ein kurzer Satz. Er muss sich schneller bewegen, um die von dir gesetzte Animationsdauer einhalten zu können.

Setze die Dauer einer Animation besser individuell je Text. Die erforderliche Zeitlänge lässt sich mit JavaScript je Text berechnen:

const pathDistance = text.offsetWidth + widthOfYourContainer;
const animationDuration = pixelDelay * pathDistance;

Der Wert von pixelDelay würde der Verzögerung / Zeitdauer (in s/ms) entsprechen, die pro Pixel benötigt werden soll (oder vereinfacht gesagt: Dieser Faktor bestimmt die Geschwindigkeit des Textes).

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zur Frage

Css Animation bleibt nicht so am ende wie gewünscht?

Warum resettet sich das immer zurück auf width 10% obwohl ich immernoch den Focus auf dem Element #i habe

#i{
    width: 10%;
}
#i:focus{
    animation: tap 2s;
}
@keyframes tap {
    from{width:10%}
    to{width: 20%;}
}
<input type="text" id="i">

Also das soll ein input feld sein das dann halt bisschen breiter werden soll wenn man draufklickt.

Und wenn man es verlässt soll es wieder auf den normalzustand.

...zur Frage

CSS Animation von Oben nach Unten durchlaufen lassen?

Hallo liebe Forumleser :)

Ich würde gerne einen Text von Oben nach Unten durchlaufen lassen :), am besten mit CSS - da Marquee nicht mehr Aktuell ist.

Ich bin noch Anfänger was CSS angeht :)

Ich habe es bisher geschafft den Text vom gewünschten Platz von Oben nach Unten laufen zu lassen, jedoch läuft der Text nicht DURCH sondern setzt sich (wenn das erste Wort den Endpunkt erreicht hat) wieder auf den Startpunkt zurück. Wie verhindere ich das zurücksetzen und mache ein Durchlaufen daraus?

Dankeschön an alle.

Schöne Woche noch!

.object {
    animation: MoveUpDown 5s linear infinite;
    position: absolute;
    left: 0;
    bottom: 0;
}
@keyframes MoveUpDown { 0% { bottom: 70%; } 100% { bottom: 20%; }

...zur Frage

css Animation erst abspielen wenn im Sichtfeld?

Wie kann man eine Snimation mit css erst abspielen lassen, wenn diese in den viewport (sichtfeld) kommt, und nicht direkt, wenn die Seite geladen wird?

und das ganze ohne Javascript oder externe programme...

...zur Frage

wie weltKarte erstellen?

Viele Datananalysetools haben eine kleine weltkarte, bei der man über die einzelnen Länder fahren kann, das jeweilige dann farblich hervorgehoben ist und man Zahlen sieht, wie macht man das also geht das ausschließlich mit html und css, wenn nötig auch javascript und wo bekommt man die Bilder scripte etc. her?

...zur Frage

Javascript in HTML einbinden - Problem?

Wie soll ich JS in HTML einbinden? Habe das immer so gemacht:
<script language="javascript" type="text/javascript" src="dateiname.js"></script>

Aber wenn ich dann z.B:

drawBoxes('yyy bbb ggg');

Mache, dann passiert in der HTML Seite garnichts.
LG

CSS in HTML einzubinden funktioniert letzterzeit komischerweise auch nicht. Muss das dann immer intern in der HTML-Datei machen.

...zur Frage

<textarea> dynamisch an die Länge des Textes anpassen, ohne Scrollbar und ohne Javascript?

Hallo,

ich möchte die Größe meines textarea der Länge des Textes anpassen. Sprich, ich habe eine orvgegebene Größe und wenn der Text länger wird, wird das Feld automatisch um eine Zeile größer. Da es für die Uni ist, darf ich kein Javascript benutzen, sondern nur HTML, CSS und PHP.

Vielen Dank schonmal!

...zur Frage

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

Durch Javascript erzeugten Text farbig darstellen, wie geht das?

Hallo ich würde gerne in meinen Javascript Code (per CSS) bestimmte Variablen farbig angeben, damit sie danach auch immer wieder farbig angezeigt werden.

Gespraech=Gespraech+"\n"+"Kunde: "+Antwort;

"Gespraech" und "Antwort" sind jeweils definierte Felder, in diese wird Text erzeugt. Auf diese würde ich gerne (per CSS) zugreifen und den erzeugten Text in unterschiedlichen Farben erzeugen lassen. Bsp: Rot und Grün.

Danke für eure Hilfe!

MfG.

Ghost

...zur Frage

Blur mit Javascript entfernen?

Ich habe ein div Element mit CSS "geblurt". Jetzt würde ich den Blur Effekt gerne mittels Javascript mit einem Klick entfernen, sodass man den Text wieder einwandfrei lesen kann. Wie Stelle ich das an?

...zur Frage

CSS keyframe Animation über JS mehrmals abspielen lassen?

Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:

<head>
    <title>Beispiel</title>
    <style>
        #y {
            height: 50px;
            position: relative;
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        #y:active{
            animation: showEffect 0.5s;
        }
    @keyframes showEffect {
        0% {
            content: 'ICH';
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        20% {
            top: 10;
            color: rgba(100, 100, 100, 1);
        }
        100% {
            top: 0;
            color: rgba(100, 100, 100, 0);
        }
    }
    </style>
</head>
<body>
    <div id="container" align="center">
        <div id="y"></div>
        <br>
        <br>
        <input type="button" value="On" onclick="showEffect()">

        <script>
            function showEffect() {
                var on = 1;
                if (on == 1) {
                    document.getElementById('y').innerHTML = "A";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 0;
                } else {
                    document.getElementById('y').innerHTML = "B";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 1;
                }
            }
        </script>
    </div>
</body>

...zur Frage

Wie kann man für ein HTML-Objekt 2 CSS-Keyframe-Animationen abspielen lassen?

Also ich möchte, dass das Objekt, bspw. ein Quadrat, das unsichtbar ist, zuerst langsam erscheint und in der nächsten Animation sich dann unaufhörlich bewegt. Das alles möchte mithilfe von CSS-Keyframes machen.

Wie geht das?

...zur Frage

Javascript + CSS animation will nicht funktionieren?

Hallo,

ich kann mir vorstellen, dass hier so einiges falsch ist. Es geht hauptsächlich um die drei letzten Klassen im CSS und um den kompletten JS Code. Ich will, dass die box auf der linken Seite und der Container unterm HR rein sliden.

Weil des Code etwas lang ist hab ich das auf jsfiddle gespeichert:

https://jsfiddle.net/damvn6wy/26/

danke im voraus.

...zur Frage

CSS @keyframes-Animation funktioniert nicht. Wer kann helfen?

Ich habe eine class definiert:

die beispielsweise die id "#before-content4" hat das sind hübsche Boxen mit einem hover Effekt. (opacity von 0.6 auf 1)

Nun möchte ich dass diese Boxen noch eine fade-in DOWN Animation bekommen....ich weiß nur nicht wie ich das jetzt verwursten muss. Ich habe leider nicht so viel Ahnung von CSS wie ich gern hätte -.-

Der code dazu: .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }

@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen