Wie kann ich ein div machen, das ein Bild "blutet", wie Sie die Seite scrollen

So oft habe ich gesucht und ich sehe einen Effekt, in dem ein div ein Bild zeigt, und während Sie die Seite nach unten scrollen, das Bild schaltet nach unten (innerhalb der div).Wie kann ich ein div machen, das ein Bild "blutet", wie Sie die Seite scrollen

Zum Beispiel: https://www.microsoft.com/en-us/windows/compete (Blättern Sie auf halbem Wege unten auf der Seite)

Ich versuche, den Effekt, den Sie auf den Link oben sehen zu replizieren. Ich habe dies versucht:

<div style="height: 200%; width: 100%; background-image: url(...)"> 
<div style="height: 66.66%; width: 100%; background-color: white;"></div> 
<div style="height: 66.66%; width: 100%;"></div> 
<div style="height: 66.66%; width: 100%; background-color: white;"></div> 
</div>

Aber es scheint nicht zu funktionieren. Ich weiß, dass es nicht viel weiter geht, sorry, aber ich kann Antworten verwenden, die sich von meinem obigen Ansatz unterscheiden. jQuery und Bootstrap können verwendet werden.

Quelle

2017-03-07 Ananth Vivekanand

Vielen Dank !!!! Das ist sehr hilfreich!! Genau das, was ich gesucht habe !! –

.static-background { 
 
    background-image: url("http://i.imgur.com/cY0blMA.jpg"); 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    min-height: 600px; 
 
} 
 
.content-container { 
 
    height: 1200px; 
 
}

<body> 
 

 
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dignissim urna, eget vestibulum metus. Suspendisse potenti. Duis sodales ultricies sem, id tempor nulla mollis sed. Nulla facilisis finibus bibendum. Aliquam id justo neque. 
 
</div> 
 

 
<div class="static-background"></div> 
 

 
<div class="content-container"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dignissim urna, eget vestibulum metus. Suspendisse potenti. Duis sodales ultricies sem, id tempor nulla mollis sed. Nulla facilisis finibus bibendum. 
 
</div> 
 

 
</body>

Ich denke, dies ist der Effekt Sie erreichen wollen. Sie erstellen einfach ein leeres div Element mit einem festen Hintergrund und Höhe.

Quelle

2017-03-07 02:46:36

JA !!!! DANKE!!! MEIN RETTER!! –

Sieht so aus, als müssten Sie vielleicht einen Fallback für den mobilen Support haben: http://caniuse.com/#search=background-att –

Ja, das könnte ich, aber jetzt versuche ich, meine Seite mobilfreundlich zu machen, wird ein Alptraum ... –

Diese Art von Effekt wird Parallax genannt und ist besser mit CSS und minimalem Javascript zu erreichen, um die Leistung zu erhöhen. Hier ist ein Beispiel und eine Beschreibung des Effekts, nach dem Sie suchen: http://callmenick.com/post/advanced-parallax-scrolling-effect.

Grundsätzlich verwenden Sie Javascript, um auf Seitenscrollen zu warten. Beim Scrollen versetzen Sie die Hintergrundbildposition basierend auf einem Bruchteil des Seitenrolloffsets. Beispiel (aus der Quelle):

(function(){ 

    var parallax = document.querySelectorAll(".parallax"), 
     speed = 0.5; 

    window.onscroll = function(){ 
    [].slice.call(parallax).forEach(function(el,i){ 

     var windowYOffset = window.pageYOffset, 
      elBackgrounPos = "50% " + (windowYOffset * speed) + "px"; 

     el.style.backgroundPosition = elBackgrounPos; 

    }); 
    }; 

})();

Quelle

2017-03-07 02:47:39

-1

Was Sie beschreiben Parallax genannt wird.

Parallax ist, wenn der Hintergrund Inhalt oder Bild in Ihrem Fall mit einer anderen Geschwindigkeit als der Vordergrund Inhalt bewegt wird, während Scrollen.

Es gibt viele Referenzen, die Sie sich ansehen können. Unter allen this ist einer der besten Artikel, die ich gefunden habe, die dieses Thema demonstrieren.

Quelle

2017-03-07 02:52:56 Benjamin

Ein Kommentar wäre immer hilfreich, um eine Antwort zu verbessern! – Benjamin

Wie kann ich ein div machen, das ein Bild "blutet", wie Sie die Seite scrollen

Antwort

Verwandte Themen