HTML CSS - Bild beim Scrollen verschwinden lassen?

Hey,

auf der Website " https://instagrambusiness.funnelcockpit.com/anleitung-sale-landing-page-2/ "verschwindet oben das Bild mit dem Diamand, desto weiter man nach unten scrollt. Allerdings nicht auf die normale Art, sondern mit irgendeinem Effekt. Das heißt das schwarze Bild darunter setzt sich auf das "Diamand-Bild".

Wie geht das?

Liebe Grüße

1 Antwort

verreisterNutzer

18.03.2020, 10:10

Das nennt man Parallax Effekt.

Vorraussetzung du kennst dich mit HTML und CSS und ein wenig JScript aus.

Hier ist ein Code Beispiel:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent

Und hier ein TUTORIAL:

https://www.w3schools.com/howto/howto_css_parallax.asp

Woher ich das weiß:Hobby

StefHi

Beitragsersteller

18.03.2020, 10:16

Ich bedanke mich, hat alles geklappt!

Ähnliche Beiträge

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 :)

...zum Beitrag

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zum Beitrag

CSS/JS - automatisch hoch scrollen nach x Sekunden?

Hallo,

ist es möglich (und wie?) das wenn ein User ein DIV-Container runter scrollt, dass nach einer bestimmten Zeit automatisch wieder hochgescrollt wird damit der nächste User von oben anfängt?

Danke

...zum Beitrag

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

...zum Beitrag

Website (HTML und CSS) Mehrere Bilder beim Scrollen sichtbar machen...

Hallo zusammen,

ich möchte gerne mit HTML und CSS eine Website erstellen. Ich habe auch schon das Grundgerüst. Jetzt möchte ich beim Scrollen Bilder sichtbar werden lassen. Das ist schwer auszudrücken...deswegen hier eine Beispielseite: http://nextcargame.com/

wenn man runterscrollt wird ein Bild sichtbar das scheinbar im Hintergrund ist und wird wieder vom Vordergrund verdeckt. Weiter unten kommt dasselbe mit einem anderen Bild. Weiß jemand zufällig wie man so etwas macht? Vielleicht kann mir ja jemand helfen;)

LG Calamann

...zum Beitrag

Wie mache ich mit diesem Code einen Zoom-In Effekt?

Guten Tag,

ich programmiere meine eigene Website und möchte nun einen Zoom-In Effekt für ein Bild einfügen. Hierfür möchte ich nur CSS benutzen. Schlussendlich sollte es so aussehen: https://w3bits.com/labs/css-image-hover-zoom/ Wenn ich den Code im CSS einfüge, vergrössert es das Bild einfach nur. Ich habe es wohl falsch angesprochen in CSS? Wie müsste daher der richtige Code aussehen, damit es funktioniert? Danke im Voraus für eure Hilfe!

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Navigation oben, die beim scrollen nicht verschwindet?

Hi,

ich habe oben eine Navigation mit CSS und HTML, aber möchte, das sie da oben auch stehen bleibt sobald ich runter srcolle, als wäre sie ein festes Element. Meine CSS Datei ist ziemlich lang. Was bzw. wo muss ich das dann eintragen?

...zum Beitrag

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zum Beitrag

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.

...zum Beitrag

wie mit html zwei bilder übereinander legen?

ich habe ein bild und will mit html, css oder php eine gif datei mit transparenten pixeln daüber legen, um so effekte zu erzielen, wie mache ich das

...zum Beitrag

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?

...zum Beitrag

HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

...zum Beitrag

Wie lasse ich ein HTML-Objekt langsamer beim Scroll bewegen?

Ich möchte eine etwas grafisch ansprechendere Website erstellen. Dabei möchte ich ein 3D-Effekt auf verschiedene Objekte haben, d.h., dass der Vordergrund normal schnell beim Scrollen ist, das hintere Bild langsamer, usw.

außerdem würde ich gerne wissen, wie man ein Bild in HTML einfügt, sodass man kein Drag & Drop machen kann.

Danke im Voraus

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen