Situation und Zielstellung Für die Logo-Skalierung beim Scrollen

Den Website-Effekt hat sicher jeder schon mal beobachtet: Sie haben auf einer Internetseite ganz oben das Logo eines Unternehmens. Es wird mit Seitenaufruf relativ groß und somit auffällig angezeigt. Wenn man dann jedoch den Seiteninhalt nach oben scollt, sich also auf dem Seiteninhalt nach unten bewegt, dann wird das Logo soft animiert verkleinert, so dass mehr Platz für den Inhalt zur Verfügung steht.

Wie man diesen Effekt auf der Website erreichen kann, soll das nachfolgende kleine Tutorial zeigen.

Umsetzung mit JavaScript, Style-Klassen und CSS-Transition-Effekt

In unserem Beispiel müssen wir dazu zwei Style-Eigenschaften für das Logo verändern, zum einen die Skalierung (wechselnd zwischen 50% und 100% Dimensionierung) und zum anderen die Positionen, die wir beim Skalieren zusätzlich noch etwas nach oben verschieben wollen. Natürlich muss das Logo selbst, welches als Background-Eigenschaft eines DIV-Containers eingebunden ist, über Style-Eigenschaften auf der Seite formatiert sein. Speziell sollte es per position:absolute; platziert worden sein. Alles andere setzte ich als Grundlagenwissen voraus.

So wird das Logo auf der Seiten in HTML eingebunden:

<div class="rt-logo-block">
   <a id="rt-logo" href="/"></a>
</div>

Die jQuery-Bibliothek sollte über das Template eingebunden werden und somit zur Verfügung stehen, damit folgendes kleine jQuery-Script arbeiten kann.

jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        if(jQuery(this).scrollTop()>=50){
	    jQuery('#rt-logo').attr('style','background-size:50% !important;');
            jQuery('.rt-logo-block').attr('style','top:-15px;');
	}   
        else if (jQuery(this).scrollTop()<50) {
	    jQuery('#rt-logo').attr('style','background-size:100% !important')
            jQuery('.rt-logo-block').attr('style','top:0;');
        }
    })
})

Dieses Script sorgt prinzipiell für Skalierung und Positionierung in Abhängigkeit von der Seiten-Scroll-Position. Damit das Logo aber nicht einfach an seine neue Position schnippt und genausoschnell skaliert wird, wollen wir diesen Vorgang absoften. Dafür nutzen wie die Transition-Eigenschaften von CSS.

Über den umschließenden DIV-Block machen wir die Positionierung:

.rt-logo-block {
    position: absolute;
    transition: top 0.2s ease 0s;
}

Die Sklierung erfolgt über den Link-Tag:

a#rt-logo {
    display: block;
    height: 150px;
    width: 207px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0) url("/images/logo.png") no-repeat scroll 50% 0 !important;
    transition: all 0.3s ease 0s;
}

Das wars. 
Natürlich können weitere Effekt animiert werden oder im Script die Bedingungen für die Animation angepasst werden.