Question

我已经创建了一个示例，它完全符合我的最终结果，但除了鼠标悬停之外我希望它在鼠标滚动中作为页面转换工作。 / p>

（滚动图片查看效果）请参见示例：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)" />

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

1 个答案: