如何在鼠标滚轮滚动上为剪贴蒙版设置动画

Posted 2023-03-23

【中文标题】如何在鼠标滚轮滚动上为剪贴蒙版设置动画

【英文标题】：How to animate clipping mask on mouse wheel scroll

【发布时间】：2015-06-03 22:13:54

【问题描述】：

我创建了一个示例，该示例完全按照我希望的最终结果工作，除了在鼠标悬停时发生，我希望它作为鼠标滚动时的页面过渡。

（滚动图片查看效果） 参见示例：http://lgadftp.com/test_mask/

我基本上是在尝试构建一个只有 2 个页面且仅包含全屏​​图像的网站。我想用这种很酷的遮罩圆形效果在两个页面之间进行转换。当我向下滚动和向后滚动时，如何让它为面具设置动画？

【参考方案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   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"   class="one" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-2.jpg" x="0" y="-100"   clip-path="url(#clip7)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-1.jpg" x="0" y="-100"   clip-path="url(#clip6)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-4.jpg" x="0" y="-100"   clip-path="url(#clip5)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-5.jpg" x="0" y="-100"   clip-path="url(#clip4)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-6.jpg" x="0" y="-100"   clip-path="url(#clip3)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-7.jpg" x="0" y="-100"   clip-path="url(#clip2)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-8.jpg" x="0" y="-100"   clip-path="url(#clip)" />