JavaScript Aktion ausführen, wenn Div-Container in Sicht

[Jxn]

Guten morgen zusammen,

meine Frage ist ziemlich simpel, aber ich finde einfach keine zufriedenstellende Lösung, mit der ich gut arbeiten kann. Es geht erstmal um Webdesign.

Ich denke mal, dass es nur durch Javascript zu realisieren ist: Ich suche nach einer Möglichkeit, wo sobald ein div-Container sichtbar ist, eine Animation (z.B. FadeIn oder so) durchgeführt wird, damit alles dynamischer und lebendiger aussieht. Ist ja häufig so auf modernen Websites.

Ich hoffe ihr wisst was ich meine, sonst nochmal fragen. :/

Könnt ihr mir da weiterhelfen?

 

[benneq]

Pures JavaScript? Oder arbeitest du mit einem Framework (z.B. Angular oder React)?

Ansonsten noch die wichtigste Frage:
WIE wird dieser Container denn sichtbar? Wenn der User dafür eh irgendwo hinklicken muss, dann lässt sich das wunderbar mit JS abfangen und die Animation starten. Oder geht's um's Scrollen?

Und wenn du ne Seite kennst, wo sowas benutzt wird, wäre ein Link sehr praktisch Und man kann sich auch ansehen wie es auf der Seite gelöst wurde.

 

[Jxn]

Nein, also es geht um das Aufbauen einer Website. Dort arbeite ich mit HTML, CSS und dem Framework Bootstrap.

Ja, sorry, für die unpräzise Fragestellung. Es geht um's scrollen.

 

[benneq]

Dann wird es wohl eine (größtenteils) statische Webseite sein, wenn ich das richtig interpretiere.

Für Bootstrap gibt es z.B. das scrollspy Plugin. Das benachrichtigt dich, sobald ein Element sichtbar ist. Ich hab selber noch nie damit gearbeitet, aber die Doku ist ziemlich ausführlich: http://getbootstrap.com/docs/4.0/components/scrollspy/

 

[Joypad]

gibt jquery plugins was bootstrap ja benutzt z.B:
https://www.jqueryscript.net/animat...-Into-View-jQuery-CSS3-Animate-It-Plugin.html
https://www.jqueryscript.net/animat...lements-When-Scrolling-Down-FadeInScroll.html

oder hier

https://codepen.io/SitePoint/pen/warKXE

 

[Jxn]

https://www.jqueryscript.net/animat...-Into-View-jQuery-CSS3-Animate-It-Plugin.html

Sieht ganz interessant aus. Simpel und effektiv. Ich denke mal das werde ich mal ausprobieren, danke!

Ergänzung (12. November 2017)

Edit: Funktioniert das nur bei mir nicht? Habe das gedownloadete Archiv mal auf meinen Webserver hochgeladen, aber es funktionieren keine Animationen. Hinweise, ob man noch etwas anderes integrieren muss, finde ich nicht?

 

[Sparta8]

Welche Dateien und wie hast du genau eingebunden? Wie hast du im Quelltext die Animationen zugeordnet?