我正在使用此视差插件向我的网站添加一些视差滚动背景图像:
http://pixelcog.github.io/parallax.js/
现在我希望图像在用户滚动时淡出,类似于这个网站:
我尝试使用以下代码,但我认为由于插件的运行方式,它并没有淡出:
$(window).scroll(function() {
$(".parallax-holder").css({
'opacity' : 1-(($(this).scrollTop())/250)
});
});
我在这里创建了一支笔,这是我必须去的地方:
http://codepen.io/mikehdesign/pen/KVKNyr
如何让图像淡出用户滚动 - 我是否需要更改jquery定位的位置?我在页面上有一些视差图像,因此需要能够专门针对一个。我很乐意切换插件,如果这就是问题所在。
谢谢!
答案 0 :(得分:1)
试试这个而不是朋友:
$(window).scroll(function() {
$(".parallax-mirror img").css({
'opacity': 1 - (($(this).scrollTop()) / 250)
});
});
答案 1 :(得分:0)
实际上你需要更改滚动功能中使用的类名...
$(window).scroll(function() {
$(".parallax-holder").css({
'opacity' : 1-(($(this).scrollTop())/250)
});
});