如何在滚动时向下滚动div(含图像内容)?
问题描述:
我有一个问题,我无法解决,但我真的很高兴,如果有人可以帮助!我想在包含少量图像的div上设置滚动效果(即反向滚动)。更确切地说,图像被随机定位到一个巨大高度的div(滚动条),这个div也被插入另一个div(wrapper =隐藏滚动条)。我想将这个长div的底部放在屏幕顶部(内部有一点偏移),然后允许用户滚动到这个div。滚动时,图像应逐渐下滑至屏幕底部。用户可以从底部滚动到顶部,使图像一个接一个地消失。我做了一些screenshots的预期效果。我尝试了一些'视差滚动'代码,但我无法使它工作,我不确定这是我寻找的最佳解决方案(我只找到背景图像示例)。如何在滚动时向下滚动div(含图像内容)?
下面是相关的代码:
------
HTML :
------
<div id="scroller-wrapper">
<div id="scroller">
<div id="img-defile1" class="img-defile">
<img src="img/image.jpg"/>
</div>
...
<div id="img-defile20" class="img-defile">
<img src="img/image20.jpg"/>
</div>
</div>
</div>
------
CSS :
------
#scroller-wrapper {
top:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
}
#scroller {
top:-600vw;
left:0;
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
-----------
JS/Jquery :
-----------
$('#scroller').scroll(function() {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
预先感谢您的回答(S)!
答
我也在法国问了这个问题Alsacréation平台和Tris TOON帮我解决了这个问题。请按照这link看他的演示。应用并仅涉及CSS部分非常简单。就我而言,我只需要添加'transform:scale(1,-1);'在我的包装和滚轮上获得预期的效果。
所以一个智者的话!
反正非常感谢,并很快见到你:)
我只是找一个例子的jsfiddle非常接近的东西我要找的,但是当我申请到我的代码,这是行不通的。有没有人有关我应该如何继续的想法?你可以在这里找到它:http://jsfiddle.net/5UUtV/1/ –