如何在滾動時向下滾動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）！

來源

2017-02-24 Marjorie Ober

我只是找一個例子的jsfiddle非常接近的東西我要找的，但是當我申請到我的代碼，這是行不通的。有沒有人有關我應該如何繼續的想法？你可以在這裏找到它：http://jsfiddle.net/5UUtV/1/ –

我也在法國問了這個問題Alsacréation平臺和Tris TOON幫我解決了這個問題。請按照這link看他的演示。應用並僅涉及CSS部分非常簡單。就我而言，我只需要添加'transform：scale（1，-1）;'在我的包裝和滾輪上獲得預期的效果。

所以一個智者的話！

反正非常感謝，並很快見到你:)

來源

2017-02-28 18:29:27

如何在滾動時向下滾動div（含圖像內容）？

回答

相關問題