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

Fragesteller

18.03.2020, 10:16

Ich bedanke mich, hat alles geklappt!

Ähnliche Fragen

Was passiert wenn man Creatine absetzt?

Also durch Creatine wird ja Wasser in den Muskeln gespeichert was die Muskeln optisch größer und praller aussehen lässt. Aber man hat ja auch einen leichten Leistungsschub was ein positiven Effekt auf den Muskelaufbau hat. Meine Frage ist ob wenn man z.b 3 Monate lang Creatine nimmt und es dann absetzt ob dann nur das Wasser wieder verschwindet und ein wenig Kraft verloren geht oder ob auch Muskeln verschwinden?

...zur Frage

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

...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

Scrollen bei Youtube umgekehrt?

Ich habe ein problem wo wies aussieht ich der einzige bin. Aber auch bei verschiedenen geräten.

Nähmlich: des öfteren passierts auf meim Huawei P9 Plus das (nur) beim versuchen im youtube die liste unterm Video zu Scrollen es bisschen runter geht und dan wieder hinauf scrollt obwohl ich den finger immer noch nach unten bewege???

Ich komm nie zu den kommentaren runter bis ich die app neu starte.

Und noch als info ich hatte mal ein ersatz gerät auch das gleiche handy mit dem gleichen problem. Plus ist das laadekabel angesteckt während des problems aber da es nach einem neustart wieder verschwindet und bei anderen apps nicht so ist denk ich das es nichts damit zu tun hat.

Was läuft da verkehrt?

...zur Frage

YouTube Handy App Scrolling Fehler beheben?

Hallo,

Ich habe vor ca. 5 Minuten diesen Bug bekommen das Ich, wen Ich ein Video gucke und zu den Kommentaren Scrollen will, dass das Handy aus irgendeinem Grund wieder nach oben scrollt

Kann mir jemand helfen?

...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

Wie kann man bei HTML einen Hover Effekt für Bilder erstellen wo der Text hervorscheint?

Hallo, Ich bin grade dabei ein Portfolio zu Programmieren und habe Probleme damit Hover Effekte zu erstellen. Meine Frage ist wie kann man bei HTML einen Hover Effekt für Bilder erstellen so dass wenn man über das Bild hovert das der Text zum Vorscheinen kommt.?

So wie auf dieser Seite: http://themes.pixelwars.org/responsy-wp/portfolio/#prettyPhoto

Vielen dank schon mal im voraus. LG. Lacadio

...zur Frage

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?

...zur Frage

css automatisches nach unten scrollen einer section?

Hallo Community,

ich benötige mal wieder eure Hilfe. Im Standard Messenger von Buddypress werden die Konversationen und damit der weg zur neuesten Nachricht und zum Eingabefeld immer länger werden, dem habe ich entgegengewirkt indem ich via css die höhe begrenzt und einen y-overflow gesetzt habe. Nun besteht allerdings das Problem das die neueste Nachricht unten, der Scrollbalken aber Standardmäßig oben ist, also immer noch extremes scrollen.

Gibts da nicht eine Option das ich nur diesen Bereich sage das er automatisch nach unten soll bis der Nutzer ggf hoch scrollt, ohne das davon alle scrollbalken betroffen wären?

...zur Frage

MSP diamand packet?

wie kann man sich ein diamand packet bei MovieStarPlanet kaufen ? Ich suche schon ne ganze weile wie aber ich finde nichts , ich hoffe ihr könnt mir weiter helfen :D

...zur Frage

Magix Video Deluxe kein Bild mehr in der Vorschau?

Hallo,

ich möchte ein Bild einfügen und dazu einen Text abspielen lassen. Nun das Bild füge ich ein und ist da. Verkleinere ich das Bild nun verschwindet es aus der Vorschau, ist jedoch noch in der Timeline zu sehen. Es verschwindet auch nicht hinter irgendeinem Objekt, weil keins da ist, wohin es verschwinden könnte.

Bitte helft mir...

Grüße

...zur Frage

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%;
}

...zur Frage

Webdesign: Slow-Scrolling-Background-Effekt?

Hallo.

Ich weiß nicht, ob dieser Effekt so heißt, aber ich beschreibe ihn mal:

Rein optisch wirkt es so, als ob im body mehrere Background-Images untereinander angeordnet hinterlegt sind.

Das gesamte Interface scheint dann wie eine Maske über die Backgrounds, also über dem Body zu liegen.

Diese Benutzeroberfläche setzt sich nun aus mehreren Full-Background-Color-Containern zusammen (also wo die Background-Bilder im Body nicht sichtbar sind) und dazwischen sind dann transparente Container mit Content gesetzt, wo die Background-Images aus dem Body(?)-Element zu sehen sind.

Die Benutzeroberflächen-Maske lässt sich mit der Maus in normaler Geschwindigkeit scrollen, während der Hintergrund dadrunter verlangsamt mitscrollt.

Weiß von Euch Designern anhand der Beschreibung, was ich meine oder meinen könnte?

Und wenn ja, wie heißt dieser Effekt richtig und wie macht man diesen?

Geht das nur mit HTML und CSS oder ist das ein JavaScript-Effekt?

Danke schon mal.

...zur Frage

Früherer Verlauf verschwindet?

Hallo,

ich schreibe seit einigen Tagen mit jemanden auf Instagram und mir ist aufgefallen, nachdem ich zurück zum Anfang des Gesprächs wollte, dass der Verlauf weg ist - und das nur bei diesem User. Je mehr wir schreiben, desto mehr alte Nachrichten verschwinden aus dem Verlauf.

Hat jemand dafür eine Erklärung?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen