Question

我有一个div的列表，其中每个iframe都包含<div class="video"> <iframe id="candle" title="Once Upon a Candle" width="70%" height="100%" src="https://www.youtube.com/embed/-f1qS0p-Lms" frameborder="0" allowfullscreen></iframe> <h5 style="text">ONCE UPON A CANDLE</h5> </div> <div class="video2"><iframe id="brighterVid" title="Brighter Together" width="70%" height="100%" src="https://www.youtube.com/embed/t_Lr1pM1R3E?list=PLt86cW5GrpjjZsMNqAe_1nwszAZRzs6Qz" frameborder="0" allowfullscreen></iframe> <h5>BRIGHTER TOGETHER - ROSKILDE FESTIVAL</h5> </div> <div class="video3"> <iframe id="lexusVid" title="Lexus - Creating Amazing" width="70%" height="100%" src="https://www.youtube.com/embed/5Ni7aWXJ2_w" frameborder="0" allowfullscreen ></iframe> <h5>LEXUS GS - CREATING AMAZING</h5> </div>。我希望能够产生视差效果，每个div都会滚动到另一个div。

这是我一直在苦苦挣扎的事情。我已经能够用背景图像弄清楚了，但也没有用这种方式（无论是使用javascript，jquery还是纯CSS）。

提前谢谢。

HTML

#candle, #brighterVid, #lexusVid, #guinnessVid {
    position: relative; 
    left:16%; 
    margin:0 auto;
}

.video, .video2, .video3, .video4 {
    position:absolute;
    width:100%;
    height:500px;
    background-color:#CACACA;

}

.video{
    top: 160px;
}

.video2 {
    top: 856px;
}

.video3 {
    top: 1503px;
}

.video4 {
    top: 2200px;
}

CSS

{{1}}

如何在div中制作iframe具有视差效果？

0 个答案: