Zur Navigation

Animationen

1 Lena567

Hallo Leute,

Kürzlich bin ich auf https://wowjs.uk/ gestoßen.
Hier werden Animationen gestattet, wenn das dazugehörige Objekt in den viewPort kommt.

Habe dieses Beispiel damit erstellt
http://lena91567.bplaced.net/1002/WOW

Nun habe ich für Bilder einen speziellen Effekt zusammengebastelt und diese funktioniert auch, aber leider werden die Effekte bei allen Bildern mit dem Laden der Seite gestattet und nicht erst, wenn das Bild im viewPort erscheint
http://lena91567.bplaced.net/1002/
wo liegt in der Fehler und wie kann ich diesen beheben?

02.09.2023 15:27

2 Jörg Kruse

Der Dokumentation zufolge soll sich der Inhalt, der eingeblendet werden soll, innerhalb des Containers div.wow befinden:

                <div class="wow">
                Content to Reveal Here
                </div>

Auf deiner Seite befinden sich die Bilder aber unterhalb des Containers:

	<div class="cover wow reveal-ltr" style="visibility: visible; animation-name: reveal-ltr;"></div>
	<img src="https://picsum.photos/id/525/600/600">

02.09.2023 18:02

1 Forenmitglied fand diesen Beitrag gut

4 Jörg Kruse

Die Bilder befinden sich dort aber immer noch außerhalb von div.wow? der grundlegende Aufbau sollte doch so sein:

<div class="wow ...">
    <img src="..." alt="...">
</div>

03.09.2023 19:04

1 Forenmitglied fand diesen Beitrag gut

6 Jörg Kruse

Die Postionierung des img Tags war da aber wenigstens schon mal korrekt. Ich würde mal mit einem minimalen Enturf beginnen, mit nur einem Bild, ohne eigenes CSS, ohne spezielle Optionen, und dieses nach und nach ausbauen. Wenn du nach jeder größeren Änderung testest, wirst du die Änderung ausfindig machen können, wegen welcher die Animation nicht mehr wie gewünscht funktioniert.

Dieses Minimalbeispiel scheint schon mal funktionstüchtig:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Loading Animation Reveal</title>
<link rel="stylesheet" href="animate.css">
<script src="js/wow.min.js"></script>
<script>
    wow = new WOW();
    wow.init();
</script>
</head>
<body>
    <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br>
    <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br>
    <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br>
    <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br>
    <div class="wow slideInRight">
        <img src="https://picsum.photos/id/768/700/400">
    </div>
</body>
</html>

04.09.2023 16:23 | geändert: 04.09.2023 16:33

1 Forenmitglied fand diesen Beitrag gut

7 Lena567

Vielen Dank Jörg für deine Bemühungen.

Nehme ich einen Effekt von animate.css, dann funktioniert das ganze, aber nicht mit dem aufdecken-Effekt von mir.
http://lena91567.bplaced.net/1002/index31.html

Dabei funktioniert der Effekt doch, wenn ich das ganze ohne das Skript nutze:
http://lena91567.bplaced.net/1002/



Habe jetzt ein anderes Beispiel gefunden und das Skript eingebaut
funktioniert auch fast
aber leider wird das Objekt, das aufgedeckt werden soll, zu Beginn voll und ganz angezeigt
http://lena91567.bplaced.net/1004/

Dabei sollte das Ganze doch durch das folgende CSS zu funktionieren, wie ich möchte
@keyframes reveal-content {
  0%, 49.999% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

Das Original schaut so aus https://codepen.io/donnyburnside/pen/geKGeG

04.09.2023 17:36

8 Jörg Kruse

Das WOW-Script blendet den Inhalt des Containers div.wow aus, damit dieser erst im Viewport eingeblendet wird. In deinem HTML ist div.wow aber leer, also hat das Script nichts auszublenden.

Nachtrag:

Die Klasse "wow" sollte m.E. dem äußeren Container zugeordnet werden:

  <p class="wow reveal">
    <span class="reveal__content">
      using CSS animations
    </span>
    <span class="reveal__artifact"></span>
  </p>

In der Doku steht noch, dass eine andere Lib als die animate.css in der Konfiguration angegeben werden muss.

(You can link to another CSS animation library by changing wow.js settings)

Ein Beispiel hierfür wird dort aber nicht gegeben...

04.09.2023 19:04 | geändert: 04.09.2023 19:16

1 Forenmitglied fand diesen Beitrag gut

9 Lena567

Hallo Jörg,

Danke für deine Bemühungen.
Deinen Vorschlag habe ich auch schon ausprobiert, aber diese funktioniert nicht.

Wenn man nur einen Text hat, dann funktioniert das folgende
  <p class="reveal">
    <span class="wow reveal__content">
      using CSS animations
    </span>
    <span class="wow reveal__artifact"></span>
  </p>

Bei einem Bild funktioniert das aber leider nicht.
Werde mir etwas anderes einfallen lassen müssen.

Nochmals danke für deine Hilfe!

07.09.2023 08:32

10 Lena567

Hallo Jörg,

Nun habe ich etwas gefunden, das ganz gut funktioniert.
Und zwar dieses hier http://lena91567.bplaced.net/reveal-effect/

Daraus habe ich das folgende gemacht
http://lena91567.bplaced.net/reveal-effect/1.html

Leider ist es bei meinem erstellten Beispiel so, dass der Effekt bei jedem Objekt sofort abgespielt wird und nicht erst wenn das Objekt im sichtbaren Bereich erscheint und auch online funktioniert der Effekt bei den Bildern nicht immer.

Was ist denn da los?
Wie kann ich das Problem lösen?

Hier noch die Dateien zum Download
http://lena91567.bplaced.net/reveal-effect.zip

09.09.2023 11:09