Erhöhen element Deckkraft, wenn der Benutzer scrollt auf der Seite nach unten
Ich habe gesehen, eine Menge der Fragen zu ändern ein element Deckkraft, wenn der Benutzer scrollt, aber habe noch nicht eines gefunden, das mir hilft, die Art und Weise, die ich brauche. Ich habe versucht, mehrere Formeln und nicht in der Lage, um den Effekt zu erzielen, die ich will.
Ich habe einen header mit einem BG-image, und darin ein div, dass ich als overlay verwenden, und ich will es dunkler und dunkler, glatt (Deckkraft zu erhöhen), während der Benutzer scrollt.
EDIT:
Der gewünschte Effekt ist:
Deckkraft ist standardmäßig eingestellt auf 0,2 in CSS. Wenn der Benutzer beginnt, nach unten scrollen, es wird starten Sie die von 0,2-1. Wenn der Benutzer scrollt bis es wieder Abnahme von 1 (oder was auch immer Wert) von 0,2.
Fiddle: https://jsfiddle.net/z7q2qtc6/
<div class='nice-header'>
<div class='header-overlay'></div>
</div>
CSS
.nice-header {
position: relative;
height: 300px;
background: center center;
background-size: cover;
background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}
.header-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgb(0,0,0);
opacity: 0.2;
}
JS
$(window).scroll(function() {
$('.header-overlay').css({
opacity: function() {
var opacity = 0;
//TODO:
//Set opacity to a higer value whilst user scrolls
return opacity;
}
});
});
InformationsquelleAutor Juan Bonnett | 2016-01-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie abrufen, die aktuelle Scroll-position durch die Verwendung der
.scrollTop()
Methode.Zur Berechnung der Opazität, subtrahieren Sie den Wert scrollTop von der Höhe des Elements, und dann teilen, dass durch das element der Höhe.
Beispiel Hier
Wenn Sie möchten, zu berücksichtigen, für das element die anfängliche Deckkraft des
0.2
:Aktualisiert-Beispiel
InformationsquelleAutor Josh Crozier
Verwenden rbga statt rbg und ändern Sie den alpha-Wert wie der Benutzer scrollt. Ich bin natürlich nicht 100% sicher, welchen Effekt Sie für aber in den meisten Fällen mit rgba ist ein besserer Ansatz als die Verwendung von rgb-und Deckkraft.
Was sind die Unterschiede zwischen RGB vs RGBA andere als 'Deckkraft'
Hier ist der link zu einem anderen Beitrag erklärt, dass dies im detail weiter.
Ahh ich verstehe - ich bitte um Entschuldigung! Das ist eine viel kompliziertere Lösung!
api.jquery.com/scroll kann helfen, wenn Sie in Ordnung sind mit der Verwendung von Jquery, dann sollten Sie in der Lage sein, zu schreiben eine einfache Funktion, mit der Sie teilen Sie die Summe ein Benutzer kann einen Bildlauf durch 8 und jedes mal springt es zum nächsten Bereich, erhöhen Sie die Deckkraft von .1, sollten Sie beim 1.0 mit maximal scrollage (oder mindestens scrollage, aber Sie wollen es) - Ich hoffe, das zumindest hilft Sie bewegen sich in etwas mehr nützlich-Richtung.
InformationsquelleAutor Donbot