WordPress Twenty Seventeen – Echtes Parallax Scrolling der Abschnittsbilder

WorpressIch habe in meinem Beitrag Menü für kleine Devices ja schon angedeutet, dass ich noch einen weiteren Tipp für das Twenty Seventeen Theme auf Lager habe. Diesmal geht es darum, die Abschnittsbilder der Startseite mit einem echten Parallax Scrolling Effekt zu versehen. Starten wir mit den Erweiterungen im CSS…


1. Abblendgradient für die Abschnittsbilder

Dies hat zwar mit dem Scrolling Effekt an sich nichts zu tun, verbessert aber den Übergang zu den Inhaltspanels.

.panel-image:before {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00000000′, endColorstr=’#a6000000′,GradientType=0 ); /* IE6-9 */
    bottom: 0;
    content: „“;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
}

 

2. Das Abschnittsbild auch auf kleinen Devices fixieren

Im CSS des Twenty Seventeen Themes wird das Hintergrundbild erst ab einer Bildschirmbreite von 48em fixiert. Diese Regel überschreiben wir. Die Hintergrundfarbe setzen wir auf Schwarz, damit der untere Rand in den Abblendgradienten übergeht.

@media screen and (min-width: 20em) {
    .background-fixed .panel-image {
        background-attachment: fixed;
        background-color: #000;
    }
}

 

3. Einen Scroll-Eventhandler installieren

Nun brauchen wir ein wenig JS Code, der auf das Scroll-Event des Fensters reagiert. Um IS Code in Euer Theme einzufügen, gibt es vielfältige Möglichkeiten. Entweder Ihr inkludiert den Code in Eurem Childtheme oder Ihr nutzt ein Plugin, z.B. Simple Custom CSS and JS.

jQuery(document).ready(function( $ ) {
    $(window).scroll(function() {
        var wHeight = $(window).height();
        var vHeight = $(document).height() * 1.2;
 
        $(„.panel-image“).css(„background-position“, „50% -“ + parseInt($(this).scrollTop() / vHeight * wHeight) + „px“);
    });
});

 


Das war’s schon. Den Effekt könnt Ihr Euch hier auf der Seite anschauen. Getestet ist der Code auf Chrome 60+, FF 55+, Edge 15+ und IE 11.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.