我有一个时间轴,我希望第一个元素成为焦点,但是当滚动时我希望下一个元素成为焦点,然后是下一个等等。到目前为止,我只设法让所有元素都集中起来。我有什么想法可以做到这一点吗?
这里是 my fiddle 这是我的代码
$(document).ready(function(){
$('.timeline li').not('.timeline li:first')
.css({
'filter': 'blur(2px)',
'-webkit-filter': 'blur(2px)',
'-moz-filter': 'blur(2px)',
'-o-filter': 'blur(2px)',
'-ms-filter': 'blur(2px)'
});
});
$(window).scroll(function(){
var prevTop = $(window).data("top");
var newTop = $(this).scrollTop();
if(prevTop)
{
if(prevTop>newTop )
{
$('.timeline li').not('.timeline li:first')
.css({
'filter': 'blur(2px)',
'-webkit-filter': 'blur(2px)',
'-moz-filter': 'blur(2px)',
'-o-filter': 'blur(2px)',
'-ms-filter': 'blur(2px)'
});
}
else{
$('.timeline li')
.css({
'filter': 'blur(0px)',
'-webkit-filter': 'blur(0px)',
'-moz-filter': 'blur(0px)',
'-o-filter': 'blur(0px)',
'-ms-filter': 'blur(0px)'
});
}
}
$(window).data("top",newTop );
});
<div class="wraphold">
<div class="timeline-title"><span>Timeline</span></div>
<ul class="timeline">
<li>
<div class="dot"><div class="date"><span>21st JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="dot"><div class="date"><span>22nd JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="dot"><div class="date"><span>23rd JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="dot"><div class="date"><span>24th JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="dot"><div class="date"><span>25th JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="dot"><div class="date"><span>26th JUNE</span></div></div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
</ul>
</div>
最佳答案
首先将其添加到您的 CSS,不要忘记为其他浏览器(如 FF 或 IE)添加过滤器。
.blur {
filter: blur(2px);
-webkit-filter:blur(2px);
}
将javascript改成这个
$(document).ready(function () {
$('.timeline li').not('.timeline li:first').addClass("blur")
});
var $window = $(window);
function isScrolledIntoView($elem, $window) {
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var elements = $('.timeline li');
$(window).scroll(function () {
elements.each(function () {
$this = $(this);
if (isScrolledIntoView($this, $window)) {
$this.removeClass("blur");
}
else{
$this.addClass("blur");
}
})
});
作为一个基本的想法,如果你可以使用 css 类,请不要使用 .css
属性。
Fiddle测试
更新 1 不是双向的,当元素离开视野时会变得模糊
关于javascript - 滚动时模糊单个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30805029/