如何在鼠标滚轮滚动上设置剪切遮罩的动画

How to animate clipping mask on mouse wheel scroll

本文关键字：动画 设置 鼠标 滚动      更新时间：2023-09-26

我创建了一个示例，它与我希望的最终结果完全一样，只是我希望它在鼠标滚动时作为页面转换而不是在鼠标悬停时发生。

（翻转图像以查看效果）参见示例：http://lgadftp.com/test_mask/

我基本上是想建立一个只有2页的网站，其中只包含全屏图像。我想用这种很酷的蒙版圆形效果在两页之间转换。当我向下滚动和向上滚动时，有什么想法可以让它为面具设置动画吗？

您可以使用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)" />

相关文章：