Scrolling DIVs mit sticky Bildern

    Was für eine schreckliche Überschrift :D aber ist sowieso schwer zu erklären, muss man ansehen. Ist jetzt auch nicht direkt eine WP Frage, aber ich möchte es zumindest in WP umsetzen.

    Wenn man auf der aktuellen AppleTV Seite ca. 20% runterscrollt, kommt rechts ein fixiertes Video, welches durch jeden nachfolgenden Abschnitt elegant überlagert wird. Einfach ansehen!

    Ich möchte es erstmal einfach nur mit Bildern umsetzen (und versuche es aktuell mit Elementor und CSS). Ich probiere die ganze Zeit, es mit fixierten Objekten hinzubekommen, aber verzweifle entweder am z-index am overflow oder beidem.

    Hat jemand eine Idee, wie so etwas grundsätzlich aufgebaut sein müsste (ungeachtet des Pagebuilders), dass das Video/Bild fixiert ist und dennoch mit jedem Abschnitt passgenau das nächste reinfährt? :rolleyes:

    Bisher habe ich das hier hinbekommen, aber das ist natürlich armselig: LINK

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das geht nicht mit purem CSS. Es wird ja ein Event benötigt bis zu dem ein Bild mitscrollt. Einige Designer nutzen als Hilfe dafür gsap - schau dir das mal an: https://greensock.com/gsap/ .. es gibt auch einen Konfigurator mit dem man sich die Bedingungen zusammenklicken kann (wobei man dabei natürlich auch sehr gut nachdenken muss, kein Programm baut so etwas für dich fertig zum Glück). Vielleicht helfen auch die Plugins hier: https://wordpress.org/plugins/search/gsap/

    Danke für deine Einschätzung, @threadi . gsap kenne ich und habe ich auch schon ein bisschen mit gearbeitet, ist bei Oooh Boi Steroids integriert. Die anderen Plugins sehen auch sehr Interessant aus. Bin aber auch ohne die Plugins nun auf einem ganz guten Weg. Mehr in Kürze... :)

    So, hier nun meine Umsetzung.

    VERSION1
    Nicht ganz so cool wie das Original, da die Bilder von Anfang an fixed sind. Außerdem bekäme ich diese Version nicht mit Videos hin.

    VERSION2
    Mein Versuch mit Videos. Weicht von der Grundidee ab. Finde diese Animation aber eigentlich auch ganz cool.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden