Bild smooth kleiner machen?
Weiß irgendwer wie man in CSS, JavaScript, HTML ein Bild in den header einfügt und wenn man dann runterscrollt, das Bild dann smooth kleiner wird? Ich weiß nicht wie ich es erklären soll...Also da ist ein Logo im Header und wenn man runterscrollt bleibt der Header und das Logo an der selben Stelle aber das Logo wird smooth verkleinert...
Beispiel: goldener-fisch.at
1 Antwort
Du könntest dem Logo folgende CSS Eigenschaften geben:
transition: width 0.5s;
transition: height 0.5s;
Dadurch werden Höhe und Breite des Logos immer smooth innerhalb von 0.5 Sekunden geändert, anstatt ruckartig. Die 0.5 kannst du natürlich anpassen, zu der Dauer, die du am schönsten findest.
Das Beispiel hier dürfte sehr ähnlich sein:
Dafür machst du einen scroll-Eventlistener auf das Window, siehst darin nach ob nach unten gescrollt wurde (dafür gibts irgend ein yTop oder scrollTop oder so bei dem event - wenn das 0 ist befindet man sich noch ganz oben auf der Seite), und dann änderst du die width und height entsprechend
Danke :) Und wie wird dann die Animation ausgeführt wenn man runter oder hoch scrollt?