$(document).ready(function() {
$(window).scroll(function() {
//alert("Window scroll event detected.");
if ($(".image-container").visible(true)) {
//alert("if ($(\".image-container\").visible(true))");
$(".image-container").animate({background-position:center 100%}, 300);
}
});
});
body {
margin:0;
}
.p-wrapper {
height:130vh;
background-color:wheat;
color:coral;
overflow:hidden;
}
.image-container {
height:200px;
background-image:url(http://www.galleonnews.com/wp-content/uploads/2015/02/creative-mind-brain-wallpaper-870x489.jpg);
background-size:100% auto;
background-position:center 0%;
color:transparent;
}
.another-p-wrapper {
background-color:pink;
color:green;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="p-wrapper"><p>I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.</p></div>
<div class="image-container">.</div>
<div class="another-p-wrapper"><p>I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. </p></div>
OR
在此SSCCE中,如果取消选中第二个注释并重新加载,则可以看到jQuery插件正常工作,即ASA .image-container
的任何部分变为可见,if ($(".image-container").visible(true))
返回{ {1}}
所以问题在于声明:true
。这没有做任何事情。问题是为什么?
我想要的效果是,当窗口向下滚动时,背景图像应该从$(".image-container").animate({background-position:center 100%}, 300);
动态background-position
到center 0%
。这样,当用户滚动窗口时,用户可以将较大的图像集视为较小div(高度)的背景。
答案 0 :(得分:1)
您需要为每个背景位置设置动画,例如:
background-position-x, background-position-y
像这样:
$(".image-container").animate({
'background-position-x': '100%',
'background-position-y': '50%'
}, 300, 'linear');
此外,在您的示例中,此$(".image-container").visible(true)
引发了错误..