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

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