問題：使用Skrollr進行水平滾動效果

Question

我想創建一個由skrollr控制的水平動畫。 向下滾動，我的頁面元素必須從容器的左側移動到右側。

假設我的元素具有相同的寬度，我將滾動數據從100％設置為0％並且它可以工作。

但是如果我的圖像寬度不同呢？ 此外，我想保留不透明度動畫，以創建這種淡入淡出效果。

這是HTML代碼：

<div id="container">
    <div class="bg" style="background-color:red" 
        data-0="transform:translate3d(0%,0%,0); opacity:1"  
        data-5000="transform:translate3d(-100%,0%,0); opacity:0">
    </div>

    <div class="bg" style="background-color:green;" 
        data-0="transform:translate3d(100%,0%,0); opacity:0"    
        data-5000="transform:translate3d(0%,0%,0);opacity:1"
        data-10000="transform:translate3d(-100%,0%,0);opacity:0">
    </div>

    <div class="bg" style="background-color:orange" 
        data-5000="transform:translate3d(100%,0%,0); opacity:0"     
        data-10000="transform:translate3d(0%,0%,0); opacity:1">
    </div>
</div>

而CSS：

#container {
    background-color:black;
    width:500px;
    height:300px;
    overflow:hidden;
}
div {
    position:fixed;
}
.bg {
    width:500px; 
    height:300px; 
}

這是一個小提琴演示

Answer 1

只需將寬度設置為100％並將圖像包含在：

#container {
    background-color:black;
    width:100%;   
    height:300px;
    overflow:hidden;
}
div {
   position:fixed;
}
.bg {
    width:100%; 
    height:300px; 
}

這是一個小提琴演示

Answer 2

我不知道不同的寬度將是一個問題。 您可以將所有寬度設置為100％並溢出：隱藏; 或者使用jQuery檢查將圖像放入容器的最佳方法。