如何在鼠标滚轮上对动画剪贴蒙版进行动画滚动

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)" />