滾動動畫 - 滾動更改圖像，使其看起來旋轉

Question

我正在爲客戶構建網站，並且他們要求讓他們銷售的產品在滾動上旋轉，類似於您可以看到的內容蘋果公司網站：

http://www.apple.com/watch/

我的產品旋轉的每一幀的文件夾。我想知道最好的解決辦法是什麼。我在每張卷軸上猜測，圖像必須替換下一張？很難解釋。

Answer 1

您可能希望將所有圖像合併爲一個精靈並使用background-position來更改「幀」。

下面是使用skrollr實現這個有點蠻力的方法。我還使用了一個CSS預處理器，它使得CSS比其他情況下的冗長。

jsfiddle demo

薩斯/ SCSS：

$image-width: 240; 

.container { 
    position: fixed; 
    top: 0; 

    [class^="sprite-"], [class*=" sprite-"] { 
     background-image: url(http://i.imgur.com/vpjGWKb.png); 
     background-position: 0 0; 
     background-repeat: no-repeat; 
     position: absolute; 
     width: #{$image-width - 2}px; 
     height: 200px; 
     display: none; 
    } 

    @for $i from 0 through 17 { 
     .sprite-#{($i + 1)} { 
      background-position: unquote(-#{($i * $image-width)}px) 0; 
     } 
    } 
} 

.spacer-div { 
    margin-bottom: 2000px; 
} 

HTML：

<div class="container"> 
    <div class="sprite-1" data-0p="display:block" data-5p="display:none"></div> 
    <div class="sprite-2" data-0p="display:none" data-5p="display:block" data-10p="display:none"></div> 
    <div class="sprite-3" data-0p="display:none" data-10p="display:block" data-15p="display:none"></div> 
    <div class="sprite-4" data-0p="display:none" data-15p="display:block" data-20p="display:none"></div> 
    <div class="sprite-5" data-0p="display:none" data-20p="display:block" data-25p="display:none"></div> 
    <div class="sprite-6" data-0p="display:none" data-25p="display:block" data-30p="display:none"></div> 
    <div class="sprite-7" data-0p="display:none" data-30p="display:block" data-35p="display:none"></div> 
    <div class="sprite-8" data-0p="display:none" data-35p="display:block" data-40p="display:none"></div> 
    <div class="sprite-9" data-0p="display:none" data-40p="display:block" data-45p="display:none"></div> 
    <div class="sprite-10" data-0p="display:none" data-45p="display:block" data-50p="display:none"></div> 
    <div class="sprite-11" data-0p="display:none" data-50p="display:block" data-55p="display:none"></div> 
    <div class="sprite-12" data-0p="display:none" data-55p="display:block" data-60p="display:none"></div> 
    <div class="sprite-13" data-0p="display:none" data-60p="display:block" data-65p="display:none"></div> 
    <div class="sprite-14" data-0p="display:none" data-65p="display:block" data-70p="display:none"></div> 
    <div class="sprite-15" data-0p="display:none" data-70p="display:block" data-75p="display:none"></div> 
    <div class="sprite-16" data-0p="display:none" data-75p="display:block" data-80p="display:none"></div> 
    <div class="sprite-17" data-0p="display:none" data-80p="display:block" data-85p="display:none"></div> 
    <div class="sprite-18" data-0p="display:none" data-85p="display:block" data-90p="display:none"></div> 
    <div class="sprite-1" data-0p="display:none" data-90p="display:block" data-95p="display:block"></div> 
</div> 

<div class="spacer-div"> 
</div> 

Answer 2

您的頁面上可以有多個圖片，每個圖片都描繪了動畫中的一個框架。您可以按照您的要求減少幀數。然後，您可以使用插件，如skrollr,scrollorama,scrollmagic，並設置時序淡入/淡出幀中的序列。