ScrollTop基於滾動位置的jQuery不透明度在頂部和底部淡入和淡出
[英]ScrollTop jQuery opacity based on scroll position fade in & out at top & bottom
問題描述
我正在尋找一個基於垂直滾動位置顯示不透明度的jQuery腳本。 其中（可見的）垂直中間位置為不透明度1，但在頂部和底部逐漸變為不透明度0。頁面上具有相同類名的多個包裝器行元素。
.inner.cover { height:20%; }
<div class="inner cover" style="opacity:0;">1 Vertical Top</div> <div class="inner cover" style="opacity:0.333;">2</div> <div class="inner cover" style="opacity:1;">3 Vertical Middle</div> <div class="inner cover" style="opacity:0.333;">4</div> <div class="inner cover" style="opacity:0;">5 Vertical Bottom</div> <div class="inner cover" style="opacity:0;">6 Below Vertical Bottom</div> <div class="inner cover" style="opacity:0;">7 Below Vertical Bottom</div> <div class="inner cover" style="opacity:0;">8 Below Vertical Bottom</div> <div class="inner cover" style="opacity:0;">9 Below Vertical Bottom</div>
類似於此網站： https : //aibcomms.typeform.com/to/vMZwYQ
有人知道/在哪里可以找到這樣的東西嗎？ 盡量避免使用插件？
2 個解決方案
解決方案1
0 2015-12-07 09:24:07
也許這個決定適合您。 祝好運。
'use strict'; jQuery(function($){ var lines = $('.line'); function setStep(step){ $('.line').removeClass('active'); $('.line').removeClass('fog'); $(lines[step]) .addClass('active') .prev() .addClass('fog'); if (lines.length-1 > step){ $(lines[step]) .next() .addClass('fog'); step++; setTimeout(function(){ setStep(step); },2000); } } //start item active 0 setStep(0); });
.line{ opacity:0; display:none; } .fog{ opacity:0.33; display:block; } .active{ opacity:1; display:block; } .inner.cover { height:20%; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="inner cover line" >1 Vertical Top</div> <div class="inner cover line" >2</div> <div class="inner cover line" >3 Vertical Middle</div> <div class="inner cover line" >4</div> <div class="inner cover line" >5 Vertical Bottom</div> <div class="inner cover line" >6 Below Vertical Bottom</div> <div class="inner cover line" >7 Below Vertical Bottom</div> <div class="inner cover line" >8 Below Vertical Bottom</div> <div class="inner cover line" >9 Below Vertical Bottom</div> </body> </html>
解決方案2
0 2015-12-08 05:57:32
也許此解決方案將適合您。 祝好運。 現在你可以在你所需要的方向通過的項目，以向上或向下自己管理。
'use strict'; jQuery(function($){ var lines = $('.line'); function setStep(step,move){ $('.line').removeClass('active'); $('.line').removeClass('fog'); $(lines[step]).addClass('active'); switch (move) { case 'down': if (lines.length-1 > step){ $(lines[step]) .prev() .addClass('fog'); $(lines[step]) .next() .addClass('fog'); step++; setTimeout(function(){ setStep(step,move); },2000); } else { setStep(lines.length-1,'up'); } break; case 'up': if (0 < step){ $(lines[step]).addClass('active'); if (lines.length-1 !== step ){ $(lines[step]) .next() .addClass('fog'); } $(lines[step]) .prev() .addClass('fog'); step--; setTimeout(function(){ setStep(step,move); },2000); } else { setStep(0,'down'); } break; } } //start item active 0 setStep(0,'down'); });
.line{ opacity:0; display:none; transition: opacity 0.9s; } .fog{ opacity:0.33; display:block; transition: opacity 0.9s; } .active{ opacity:1; display:block; transition: opacity 0.9s; } .inner.cover { height:20%; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="inner cover line" >1 Vertical Top</div> <div class="inner cover line" >2</div> <div class="inner cover line" >3 Vertical Middle</div> <div class="inner cover line" >4</div> <div class="inner cover line" >5 Vertical Bottom</div> <div class="inner cover line" >6 Below Vertical Bottom</div> <div class="inner cover line" >7 Below Vertical Bottom</div> <div class="inner cover line" >8 Below Vertical Bottom</div> <div class="inner cover line" >9 Below Vertical Bottom</div> </body> </html>
滾動時jQuery淡入淡出/不透明，但回到頂部時禁用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.