Bewertung: 3 / 5

Stern aktivStern aktivStern aktivStern inaktivStern inaktiv
 

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.

Kommentare (2)

This comment was minimized by the moderator on the site

Funktioniert leider so nicht auf HTML-Seiten, da etwas fehlt in der Beschreibung. Man sollte schon dazu schreiben, dass man ein fixiertes Menü braucht. Sonst nutzt dieser ganze Zirkus nichts.

This comment was minimized by the moderator on the site

Vielen Dank "Wilderer" für den Hinweis. Natürlich haben Sie recht, dass eine animierte Skalierung des Logos nur Sinn macht, wenn dieses beim Scrollen sichtbar bleibt. Dazu muss es selbstverständlich möglichst in einem fixierten Bereich liegen. Das hatte ich schlicht als Wissen vorausgesetzt, obwohl es eine entscheidende Voraussetzung ist.

Bisher wurden hier noch keine Kommentare veröffentlicht

Einen Kommentar verfassen

  1. Kommentar als Gast veröffentlichen. Registriere Dich oder melde Dich zu Deinem Benutzerkonto an.
0 Zeichen
Anhänge (0 / 3)
Deinen Standort teilen
Gib den Text aus dem Bild ein. Nicht zu erkennen?