Frage von MoinMoin2014, 29

CSS/Javascript - Ein "Transition Fokus" für das Scrollen?

Ich habe verschiedene DIVs die, wenn man mit der Maus drüberfährt, ganz simpel ihre Hintergrund-Farbe definiert ändern. Ohne Hover sind alle blau gefärbt.

Ich möchte, dass der Hover-Effekt ausgeführt wird, wenn man auf der Seite normal scrollt und die DIV definitiv zu sehen ist, damit man nicht extra drüberhovern muss mit der Maus.

Ich kenne dafür leider keine weiteren Schlagworte für Google, wodurch ich mich also der Community hier zuwende, weiß da jemand einen Rat? :)

EDIT: die DIVs sollen die Farbe einzeln ändern, sie sind auch nicht alle auf einmal zu sehen, man muss halt schon scrollen :D

Antwort
von Dory1, 21

Auf die schnelle fällt mir nur eine ziemlich unschöne Lösung ein, bei der während des Scrollens ständig die Position der Boxen abgefragt und dann mit der Scollposition abgeglichen wird (Performancekiller für den Browser).

Mal so hingeklatscht: http://codepen.io/anon/pen/YWXrNR (benötigt jQuery)

Definitiv schneller wäre es, wenn du dir die einzelnen Positionen der Divs einmalig in einer Liste "vormerkst" und im Scroll-Handler nur noch nachschaust ob gerade eine passenden Box sichtbar ist - sollte zumindest theoretisch funktionieren.

Ansonsten habe ich dieses Plugin gefunden, womit es evtl. noch einfacher geht:

https://scrollrevealjs.org/

Kommentar von MoinMoin2014 ,

Besten Dank, das ist schon mal SEHR viel wert, ich hatte es gestern noch primitv anderweitig lösen können, indem ich auch eine seitenfüllende DIV mit Hover den Hover-Effekt der eigentlich gezielten DIV auslöse :D

Da sind mir auch weitere Schlagworte eingefallen, zum Beispiel mit Javascript Scroll Trigger CSS Animation

Keine passende Antwort gefunden?

Fragen Sie die Community