Support » Allgemeine Fragen » Onscroll Effekt bei z-index

  • Hallo,

    habe mal eine Frage zu einer öffentlichen Website:

    https://templated.co/hielo

    Wie wird dieser Onscroll Effekt gemacht, sodass sich der Hintergrund unter den weißen Teil unteren Teil der Seite verschwindet.

    Man kann den Source Code herunterladen, aber ich weiß leider nicht genau wo nach ich suchen soll :/

    Würde mich über Eure hilfe freuen 🙂

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Hallo random,

    das kannst du normalerweise über CSS lösen.
    Dazu gehst du im Customizer auf die entsprechende Seite und fügst bei „Eigenes CSS“ folgenden Code ein:

    .navbar {
        position: fixed;
        z-index: 999;
        width: 100%;
    }

    Der Selector „.navbar“ sollte sich dann natürlich auf das Element beziehen, welches du am oberen Rand fixiert haben möchtest. Der z-index bezieht sich hier auf die Transparenz des fixierten Bereichs. 999 bedeutet, dass der Bereich intransparent ist.

    Grüße
    Pirmin

    Kleiner Nachtrag: z-index ist nicht eigentlich die Transparenz, sondern ordnet die Elemente nach aufsteigenden Werten über- und untereinander an. In diesem Fall entspricht das der Transparenz, weil die Leiste oben natürlich immer über allem anderen liegen soll.

    Ich glaube das geht iwie mit einer library. Bei fixed müsste das scrollen beim bild viel schneller und aggressiver sein.

    Hi @random9,

    das ist mit JS umgesetzt – das müsste in der main.js der Part ab Zeile 42 sein. Scheint in dem Fall eine Eigenentwicklung zu sein, aber es gibt verschiedene Bibliotheken dafür (Stichwort »parallax«). Solche Effekte lassen sich aber wohl auch mit purem CSS umsetzen: https://keithclark.co.uk/articles/pure-css-parallax-websites/ Das wäre einer JS-Lösung gegebenenfalls vorzuziehen.

    Viele Grüße
    Florian

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Onscroll Effekt bei z-index“ ist für neue Antworten geschlossen.