Anpassen, CSS Opacity Mit Element Scrollen mit jQuery
Hallo ich möchte zu binden, die die CSS-opacity zwei divs mit, wie viel das element gescrollt wird.
Zum Beispiel sagen, ich habe zwei divs:
<div class="red" style="background:red"></div>
<div class="blue" style="background:blue"></div>
Als das rote div kommt in den Arbeitsbereich, dessen opacity geht von 0 bis 100 - je nach der Höhe gescrollt werden.
Ebenso wie das Blaue div kommt in viewport seiner Deckkraft geht von 100 auf 0, je nach der Höhe gescrollt werden.
Fand ich diese Jquery/Javascript Opacity-animation mit Blättern -
var fadeStart=100 //100px scroll or less will equiv to 1 opacity
,fadeUntil=200 //200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
jedoch der scroll-Betrag gebunden ist das Dokument, Höhe, anstatt dem div selbst.
Hier ein jsfiddle arbeiten von http://jsfiddle.net/RPmw9/
Vielen Dank im Voraus.
- Da offset = $(document).scrollTop() und nicht Ihr element. Ich muss schauen in die scrollTop-Eigenschaft, um zu sehen, ob es verfügbar ist, alle Elemente.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hängt davon ab, Wann Sie wollen, dass es vollkommen undurchsichtig ist oder nicht, aber dies könnte der Anfang sein:
»»Fiddle«« (Multiple-element-Klasse-version - individuell festgelegt)
»»Fiddle«« (Single-element-Klasse-version - wenn nur ein element pro Klasse)
OK. Einige Kommentare Hinzugefügt. Könnte nicht das Gefühl, es ist die beste Erklärung. Einen besseren Weg zu verstehen, ist es vielleicht, einen Blick auf die Werte, also ich habe auch einen
console.log()
Linie innerhalb derfader()
Funktion. Öffnen Sie Ihre Konsole und die Werte anzeigen, die beim scrollen. Geige mit Protokollierung. Beachten Sie auch diese performance Unterschied.style
wesentlich schneller.Variante zwei:
Dieses set die volle Deckkraft, wenn das element hat oben an der Spitze der Fenster, (nicht Unterseite des Elements). Beachten Sie, dass wir die
Math.min()
in der oben genannten Funktion auch weglassenop
variable undif (op <= 1)
undif (op >= 0)
Aussage, aber nicht mindestens einen schnellen benchmark auf jsperf offenbart dieif
version zu performen etwas besser. Wenn Sie viele Elemente, die Sie Stil, sollte man dieif
version.»»Fiddle««
console.log()
die hoffentlich hilft, zu verstehen, was Los ist.$(this).css
und verwendetr.css
undb.css
.