如何在鼠標滾輪上對動畫剪貼蒙版進行動畫滾動

Question

我創建了一個完全符合我希望我的最終結果能夠正常工作的示例，除了在鼠標懸停時發生的動作之外，我希望它能夠作爲頁面轉換在鼠標滾動。

（翻轉圖像查看效果） 參見示例：http://lgadftp.com/test_mask/

基本上，我試圖建立只有2包含只是全屏顯示圖像，網頁的站點。我想用這個很酷的掩蔽循環效果在兩頁之間轉換。當我向下滾動並備份時，如何讓它具有動畫效果的任何想法？

Answer 1

你可以做，使用SVG

$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 100) { 
 

 
     $('.seven').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.seven').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 300) { 
 

 
     $('.six').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.six').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 500) { 
 

 
     $('.five').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.five').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 700) { 
 

 
     $('.four').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.four').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 900) { 
 

 
     $('.three').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.three').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 1200) { 
 

 
     $('.two').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.two').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 
    if ($(window).scrollTop() > 1500) { 
 

 
     $('.one').velocity({ 
 
      r: '1000' 
 
     }) 
 
    } else { 
 
     $('.one').velocity({ 
 
      r: '0' 
 
     }) 
 
    } 
 

 

 
})

div { 
 
    width:100vw; 
 
    height:400vw; 
 
} 
 
svg { 
 
    position:fixed; 
 
} 
 
circle { 
 
    transition:.5s all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script> 
 
<div> 
 
    <svg width="100%" height="100%" viewbox="0 0 500 500"> 
 
     <clippath id="clip"> 
 
      <circle cx="200" cy="100" r="0" class="one" /> 
 
     </clippath> 
 
     <clippath id="clip2"> 
 
      <circle cx="200" cy="100" r="0" class="two" /> 
 
     </clippath> 
 
     <clippath id="clip3"> 
 
      <circle cx="200" cy="100" r="0" class="three" /> 
 
     </clippath> 
 
     <clippath id="clip4"> 
 
      <circle cx="200" cy="100" r="0" class="four" /> 
 
     </clippath> 
 
     <clippath id="clip5"> 
 
      <circle cx="200" cy="100" r="0" class="five" /> 
 
     </clippath> 
 
     <clippath id="clip6"> 
 
      <circle cx="200" cy="100" r="0" class="six" /> 
 
     </clippath> 
 
     <clippath id="clip7"> 
 
      <circle cx="200" cy="100" r="0" class="seven" /> 
 
     </clippath> 
 
     <clippath id="clip8"> 
 
      <circle cx="200" cy="100" r="0" /> 
 
     </clippath> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-3.jpg" x="0" y="-100" width="500" height="500" class="one" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-2.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip7)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-1.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip6)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-4.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip5)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-5.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip4)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-6.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip3)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-7.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip2)" /> 
 
     <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-8.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip)" />