使用SVG遮掩实现前后场景对比特效 - 踏得网

Slider Gallery With SVG Masks，装修前和装修后的效果对比，适合家装设计、房产开发公司类的宣传页面。有一个居中滑动分割的动效。

svg, mask, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2323
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $buttons = $(".newPic");
var startY = 0;
var initTimeline = new TimelineMax({
    onComplete: createDragger,
    delay: 1
});

initTimeline.to("#dragger", 1, {
    x: 500
});
initTimeline.to("#theSquare", 1, {
    attr: {
        x: -450
    }
}, 0);

$buttons.click(slide);

function slide() {
    var butIndex = $buttons.index($(this));
    var newY = butIndex * 700;
    if (newY === startY || TweenMax.isTweening(".allPics")) {
        return;
    } else {
        TweenMax.to(".allPics", 1, {
            y: -newY
        });
        TweenMax.to(".allCaptions", 1, {
            y: -newY / 7
        });
        startY = newY;
    }
}

function createDragger() {
    Draggable.create("#dragger", {
        type: "x",
        bounds: {
            minX: 0,
            maxX: 1000
        },
        throwProps: true,
        edgeResistance: 1,
        onDrag: moveMask,
        onThrowUpdate: moveMask
    });
}

function moveMask() {
    TweenMax.set("#theSquare", {
        attr: {
            x: this.x - 950
        }
    });
}

编译

CSS

HTML

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,700&amp;#39;'>

<svg id="gallery" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1100 800">
    <defs>
        <mask id="masterMask">
            <rect x="50" y="100" width="1000" height="600" fill="#fff" />
            <rect x="50" y="600" width="1000" height="200" fill="#fff" rx="15" ry="15" />
        </mask>
        <mask id="slideMask">
            <rect id="theSquare" x="-950" y="100" width="1000" height="700" fill="#fff" />
        </mask>
        <mask id="captionMask">
            <rect x="50" y="0" width="1000" height="100" fill="#fff" />
        </mask>
        <mask id="draggerMask">
            <circle cx="50" cy="450" r="30" fill="#fff" />
            <circle cx="1050" cy="450" r="30" fill="#fff" />
            <rect x="50" y="0" width="1000" height="800" fill="#fff" rx="18" ry="18" />
        </mask>
    </defs>
    <title>Before and After Gallery</title>
    <g mask="url(#masterMask)">
        <g class="allPics">
            <image xlink:href="/uploads/1704/before00.jpg" x="50" y="100" width="1000" height="700" />
            <image xlink:href="/uploads/1704/before01.jpg" x="50" y="800" width="1000" height="700" />
            <image xlink:href="/uploads/1704/before02.jpg" x="50" y="1500" width="1000" height="700" />
        </g>
        <g mask="url(#slideMask)">
            <g class="allPics">
                <image xlink:href="/uploads/1704/after00.jpg" x="50" y="100" width="1000" height="700" />
                <image xlink:href="/uploads/1704/after01.jpg" x="50" y="800" width="1000" height="700" />
                <image xlink:href="/uploads/1704/after02.jpg" x="50" y="1500" width="1000" height="700" />
            </g>
        </g>
    </g>
    <g mask="url(#captionMask)">
        <rect x="50" y="50" width="1000" height="50" fill="#68B3AF" />
        <rect x="50" y="0" width="1000" height="100" rx="15" ry="15" fill="#68B3AF" />
        <g class="allCaptions" fill="white">
            <g class="captions">
                <text transform="translate(80 67.05)" font-size="55">Kitchen Remodel</text>
                <text transform="translate(561 40.33)" font-size="28">Contractor: XYZ Kitchen Updates
                    <tspan x="0" y="33.6" xml:space="preserve">Budget: $25,000</tspan>
                    <tspan x="230.88" y="33.6">Time: 8 weeks</tspan>
                </text>
            </g>
            <g transform="translate(0 100)" class="captions">
                <text transform="translate(80 67.05)" font-size="55">Basement Bath</text>
                <text transform="translate(561 40.33)" font-size="28">Contractor: The Bath Dudes
                    <tspan x="0" y="33.6" xml:space="preserve">Budget: $11,000</tspan>
                    <tspan x="230.88" y="33.6">Time: 4 weeks</tspan>
                </text>
            </g>
            <g transform="translate(0 200)" class="captions">
                <text transform="translate(70 67.05)" font-size="55">Hang your clothes</text>
                <text transform="translate(561 40.33)" font-size="28">Why? Because your mom said so.
                    <tspan x="0" y="33.6" xml:space="preserve">Budget: $0</tspan>
                    <tspan x="180.88" y="33.6">Time: Immediately!</tspan>
                </text>
            </g>
        </g>
    </g>
    <rect x="52" y="2" width="996" height="796" fill="none" stroke-width="4" stroke="#fff" rx="15" ry="15" />
    <g mask="url(#draggerMask)">
        <g id="dragger">
            <line id="divider" x1="50" y1="100" x2="50" y2="800" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" />
            <circle id="draggerBase" cx="50" cy="450" r="30" fill="#68B3AF" />
            <circle id="outline" cx="50" cy="450" r="26" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2" />
            <polygon id="leftTriangle" points="67.21 449.62 60.11 453.73 53 457.83 53 449.62 53 441.42 60.11 445.52 67.21 449.62" fill="#fff" />
            <polygon id="rightTriangle" points="32.79 449.62 39.89 445.52 47 441.42 47 449.62 47 457.83 39.89 453.73 32.79 449.62" fill="#fff" />
        </g>
    </g>
</svg>
<div class="controls">
    <div class="newPic">Kitchen Remodel</div>
    <div class="newPic">Basement Bathroom</div>
    <div class="newPic">Pick Up Your Clothes</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='/uploads/150601/ThrowPropsPlugin.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js'></script>