WordPress Twenty Seventeen Parallax Scrolling – The Next Level

Der Bau einer Webseite ist vergleichbar mit der Renovierung des Kölner Doms – man ist nie fertig. Insbesondere die Möglichkeiten von HTML 5, CSS 3 und Javascript sind schier grenzenlos und laden zu Spielereien ein – zum Wohl oder Wehe der Ergonomie der Webseite. Mich persönlich fasziniert der Parallax Effekt und habe diesen für das moderne, aber recht einfach gehaltene Twenty Seventeen Theme implementiert. Details dazu findet Ihr in einem früheren Beitrag zu diesem Thema.

Grafischer Editor für die Gestaltung
Das Twenty Seventeen Theme, das der Webseite zu meinem Roman Der Kristall zugrunde liegt, hat aus gutem Grund eine begrenzte Breite für den Inhalt der Startseite und der Beitragsseiten. Das kann zwar leicht geändert werden, jedoch kommt die maximale Laufbreite der menschlichen Lesegewohnheit sehr entgegen. Auf großen 16:9 Bildschirmen führt dies allerdings im Fullscreen Modus des Browsers zu verwaisten Randbereichen, was das sehr reduzierten und cleanen Designsprache das Twenty Seventeen Themes ein wenig abträglich ist. Also ran an die Tastatur und genau diese Stärke des Themes herausgearbeitet.

1. Einführung eines neuen Breakpoints bei 67em

Wenn die Breite des Browserfensters deutlich größer wird als die des Inhalts, begrenzen wir die Breite der einzelnen Bereichspanels und erzeugen so die Illusion eines Dokuments, das in der Webseite über dem Hintergrund schwebt.

@media screen and (min-width: 67em) {
    .home .twentyseventeen-panel {
        background-color: rgba(0,0,0,0.0);
    }
 
    .home .site-content-contain {
        background-color: #000;
    }
 
    .panel-content {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(34,34,34,0.97);
        border-radius: 10px;
    }
}

 
Was bewirken nun diese CSS-Regeln? Zuerst einmal wird die Breite der Abschnittspanels auf 1000 Pixel begrenzt und in der Mitte des Browserfensters zentriert – die leicht abgerundeten Ecken gehören dabei zur Formsprache der Webseite. Der Hintergrund der Startseite wird vollständig transparent gemacht, damit das Hintergrundbild an den Seiten durchscheint. Zusätzlich werden die Bereichspanels leicht transparent gemacht zur Vorbereitung des zweiten Schritts.

2. Das Abschnittsbild auch hinter die Panels legen

Die im Customizer definierten Abschnittsbilder des Twenty Seventeen Themes laufen den Panels voraus. Damit kommt es nun zu Lücken. Also müssen wir das Abschnittsbild der Webseite, in diesem Fall die Pyramide, jetzt auch hinter die Panels legen. Genau dafür habe ich eben den Transparenzeffekt definiert. Und die zweite Regel schaltet den Abblendeffekt aus, den ich bei der ersten Implementierung des Parallax Scrolling Effekt eingeführt hatte, da dieser nun stört.

@media screen and (min-width: 67em) {
    .home .site-content-contain {
        background-image: url("/Pyramide.jpg");
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }
 
    .home .panel-image:before {
        display: none !important;
    }
}

 

3. Den Eventhandler für das Parallax Scrolling erweitern

Den Eventhandler, der die Pyramide beim Scrollen des Inhalts der Seite verschiebt, habe ich bereits in meinem ersten Beitrag zum Parallax Scrolling vorgestellt. Wir müssen ihn nur leicht anpassen.

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

 


Das war’s auch schon wieder. Der Effekt kann auf der Startseite bei entsprechend breitem Browserfenster bewundert werden.

Hinweis: Der dargestellte Code ist leicht vereinfacht. Ich habe die Regeln am Ende browserspezifisch formulieren müssen, da die Microsoft Browser mit der sehr rechenintensiven Darstellung überfordert sind und das Bild sehr stark ruckelt. Die vorgestellte Lösung wird daher vorerst nur in Chrome, Firefox und Safari unterstützt. Die Technik, browserspezifische CSS-Regeln zu formulieren, könnt Ihr in meinem Beitrag zu responsiven Header Videos nachlesen.

Gefällt
Gefällt Liebe Haha Wow Traurig Verärgert

10 Antworten auf „WordPress Twenty Seventeen Parallax Scrolling – The Next Level“

    1. Das wundert mich nicht, denn der Breakpoint liegt bei 67em und ist damit nur auf Desktop aktiv. Im Gegenteil, die notwendige Leistung für transparentes Parallax Scrolling würde einen Akku schnell leer saugen. Daher ist das Feature auf Smartphones abgeschaltet.

      1. Oh ich war beim falschen Beitrag. Ich meinte eigentlich den Code aus dem Voraus gegangenen Beitrag, der das Parallax Scrollen am Smartphone aktivieren soll.

        1. Ah, ok. Parallax Scrolling ist am Smartphone deaktiviert. Das bewirken tiefer liegende Regeln im Twenty Seventeen Theme, um den Akku zu schonen. Ebenso wie das Ausspielen von Videos. Sonst wären die Benutzer ziemlich unglücklich.

          1. Der Code den du in dem anderen Beitrag gezeigt hast soll das doch aktivieren? Und es hat auch kurz funktioniert. Nur leider jetzt nicht mehr. Bzw zeigt mir die WP Vorschau fürs Handy dass es geht, am Handy selber steht das Bild aber.
            Vielen Dank!

          2. Das Bild steht auf meiner Seite bei Smartphones auch. Erst ab dem Breakpoint 30em wird Parallax Scrolling aktiviert.

    1. Man müsste da eine Menge CSS Regeln des Themes überschreiben. Ich habe das nicht gemacht, da es ja wg. CPU Leistung sinnvoll ist. Ich werde es aber aus reiner Neugierde mal probieren und lasse es Dich dann wissen. E-Mail Adresse habe ich ja.

Schreibe einen Kommentar

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