Mit dem HTML-Analysator der Developer-Tools erkennt man, dass das Logo immer aus den selben HTML-Elementen besteht (a-Tag mit img drin) und dass die Bewegungen und Animationen durch CSS und Javascript veranlasst werden. Leider habe ich nicht heraus gefunden, wo sich das Javascript versteckt, weil es so zahlreiche Skript-Dateien sind und sie komprimiert sind. Man kann sich jedoch leicht zusammenreimen, wie es funktioniert:
Im Ausgangszustand ist das Logo absolut oben auf der Seite positioniert.
onscroll-Handler registrieren und die Scroll-Position mit einem festen Wert vergleichen.
Wird die Position größer als dieser Wert: Positionierung auf fixed ändern und Größe animieren mit Easing bounce.
Wird die Position wieder kleiner als dieser Wert: Logo durch Animation der top-Position nach oben weg gleiten lassen und am Ende die Positionierung wieder auf absolut ändern.
Das geht ganz einfach mit jQuery. Zum Beispiel mittels .scrollTop() überwacht man, ob die Seite weit genug gescrollt wurde. Mit .animate() animiert man das Element dann.
Das verantwortliche Script sitzt hier in der lib.js. Dort findet sich in den Zeilen 485 - 578 eine animateLogoCotacts() Funktion. In den Zeilen 580 - 582 werden Positionsdaten ermittelt und in den Zeilen 588 - 602 wird die eben genannte Funktion aufgerufen.
headroom.js ist das schlüsselwort wenn du es auch machen willst 
Vielen Dank. Es hat bei mir geklappt!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
