Scroll Überlappen Animation?

Hallo,

Also geht mal bitte auf folgende Seite:

Dort wird erst ein video angezeigt, und wenn man scrollt überlappt sich das ganze, das video hab ich schon, aber wie kann sich das beim Scrollen überlappen?

1 Antwort

Verelat777

13.10.2022, 18:32

Diesen Effekt bezeichnet man als „Parallax Scrolling“.

Wie sich dies mittels HTML und CSS umsetzen lässt, erfährst Du hier: https://www.w3schools.com/howto/howto_css_parallax.asp

Tipp: Besonders bei diesem Thema lohnt es sich, die Internetrecherche auf Englisch durchzuführen, um bessere Suchergebnisse zu erhalten.

Lenny774

Fragesteller

14.10.2022, 13:06

Vielen dank...

Hallo , ich bin dabei ein WebSite zu schreiben und mit interessiert wie ich Scroll befehl schreiben soll, wenn es auf dem Button gedrückt wird dass ees automatisch nach unten scrollt .? danke

...zur Frage

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

Div ohne Position im Vordergrund?

Hallo. Ich versuche gerade auf einer Webseite ein div in den Vordergrund zu verschieben. Das Problem bei der ganzen Sache ist:

Es hat keine Position. Über den normalen weg des z-index ist also erstmal nichts zu machen.
Es liegt etwa folgende Struktur vor:
Soll oben Liegen Ist eine Js Animation welche über allem liegt aber von manchen Objekten überlappt werden soll

Gibt es dafür eine schon bestehende Lösung?

Danke!

...zur Frage

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

...zur Frage

YouTube zurücksetzen?

Mein YouTube hat sich verändert. Scheinbar durch ein neues Update?

Wenn ich ein Video schaue werden mir die Kommentare und die Infobox seitlich von diesem und die vorgeschlagenen Videos unter dem Video angezeigt. Dadurch habe ich auch eine Scroll-Leiste um zur Seite zu scrollen. leider auch wenn das Video im Vollbild ist. Kann ich das irgendwie wieder ändern? Laos so dass alles wieder beim alten ist?

...zur Frage

Barrierefreiheit Google scroll-top-button?

Wenn ich meine Seite auf pagespeed.web.dev analysiere, wird mir dieses Problem "Schaltflächen haben keinen für Screenreader zugänglichen Namen" unter Barrierefreiheit angezeigt. Dabei geht es darum, dass ich einen scroll-top-button auf der Seite habe. Dieser hat üblicherweise keinen Text und scrollt lediglich bis ganz nach oben. Wie kann ich das Problem beheben, sodass mir das nicht mehr als Fehler bei Google angezeigt wird?

Die Seite ist mit Wordpress erstellt.

Hier der Code dazu:

body.home > div.jupiterx-site > div.jupiterx-corner-buttons > button.jupiterx-scroll-top

...zur Frage

Navbar verschwindet unter bildern - was kann ich dagegen tun?

Ich habe eine sticky navbar gemacht, die also immer oben angezeigt wird. Wenn man nun scrollt verschwindet die navbar aber unter die texte, bilder etc.

Wie kann man das beheben?

Habe es schon mit "z-index" versucht, das wird allerdings ignoriert.
Danke für Rückmeldungen!

...zur Frage

Scroll lag bei YouTube?

Ich habe bei YouTube manchmal immense scroll lags. Komischer weise geht das Problem sofort weg sobald ich ein video erst im Vollbild modus geladen habe und dann wieder rausgehe. ´Manchmal ist das scrollen auch gleich flüssig. Das Video selber läuft ruckelfrei.

...zur Frage

Kindle Wikipediafunktion "kann nicht scrollen"

Hallo, habe ein Problem mit meinem Kindle-Paperwhite. Bei der Wikipedia-Funktion wird zum Teil der "Scroll-Balken" angezeigt (mir fällt gerade kein besseres Wort dafür ein), aber ich kann nicht scrollen. Im Inhaltsverzeichnis funktioniert es komischerweise. Gibt es da einen Trick oder stimmt etwas mit meinem Kindle nicht?!

...zur Frage

[HTML] Wie kann ich das fixieren?

Also, Text (der schwarze Kasten) ist ein ewig langer Text...

Text 2 (der rote Kasten) soll ein Hallo beinhalten und dort "fest" gemacht werden,

also um es zu erklären, man soll den Linken Teil scrollen können, nur der rechte Teil (Text 2) soll immer dort bleiben. Egal ob man scrollt oder nicht.

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

HTML / CSS scroll animation aber wie?

Hi, ich brauch eine Animation bei der man scrollt und ein div beginnt zu wachsen/zoomen nach einem Maximum soll es wieder kleiner werden und der nächste block wachsen usw. eine Grafik ist im Anhang. Ich brauch keinen fertigen Code eher einen Ansatz oder etwas vergleichbares.

...zur Frage

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zur Frage

HTML/CSS/JS Scrollen verhindern?

Hi Leute,

Ich habe eine Website bei der das Scrollen komplett (sowohl manuell als auch per JS) verhindert werden soll. Mir ist klar das folgende Möglichkeit geht:

overflow: hidden;

Das Problem ist, dass man dann immer noch mit dem Mausrad scrollen kann (siehe hier: http://hoohaadesign.co.uk/#/intro1)

Lässt sich das auch irgendwie verhindern?

Danke im voraus, Marvin

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen