Knowledgebase

Logo im Seitenkopfbereich verkleinern beim Scrollen nach unten

Bewertung:  / 4
SchwachSuper 

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.

  • Gast - Wilderer

    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.

  • 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.

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.