HTML5 SVG常见移动应用中滑动解锁动画

Swipe to unlock SVG & GSAP，可用于需要解锁或者需要用户验证（判别非自动程序或机器人）的场合，防止恶意注册等。

html5, unlock, anti-spam

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var mouse,
    swiperDragged = false,
    startX,
    endX = 0;

function swipe() {
    var $swipe = $('.swiper'),
        $btn = $('.swipe-btn', $swipe);

TweenLite.to('#swipe-arrow', 0, {
        x: 16,
        y: 11
    });
    TweenLite.to('#swipe-end', 0, {
        x: 235,
        y: 12
    });

var tl = new TimelineMax({
        repeat: -1
    });
    tl.staggerFrom("#dotted-line circle", 0.7, {
        scale: 0.7,
        x: -2,
        y: .5,
        opacity: 0.7,
        delay: 0.1,
        ease: Power2.easeInOut,
        repeat: 1,
        yoyo: true
    }, 0.15);

$btn.on('click touchend', function(e) {
        e.preventDefault();
    }).on('touchstart mousedown', function(e) {
        e.preventDefault();
        swiperDragged = true;
        mouse = e;
        startX = typeof e.pageX != 'undefined' ? e.pageX : e.originalEvent.touches[0].pageX;
        endX = 0;
    })

$(document).on('touchmove mousemove', function(e) {
        if (swiperDragged) {
            actualX = typeof e.pageX != 'undefined' ? e.pageX : e.originalEvent.touches[0].pageX;
            endX = Math.max(0, Math.min(215, actualX - startX));
            TweenLite.to('#swipe-btn', 0, {
                x: endX
            });
        }
    }).on('touchend mouseup', function(e) {
        swiperDragged = false;
        if (endX < 200) {
            TweenLite.to('#swipe-btn', .5, {
                x: 0
            });
        } else {
            console.log($btn.attr('xlink:href'));
            TweenLite.to('#swipe-btn', .1, {
                x: 215
            });
            $('.unlock').addClass('unlocked');
            setTimeout(function() {
                TweenLite.to('#swipe-btn', .5, {
                    x: 0
                });
                $('.unlock').removeClass('unlocked');
            }, 1400);
        }
        endX = 0;
    });
}

swipe();

编译

CSS

html,
body {
    min-height: 100vh;
}
body {
    background: -webkit-linear-gradient(45deg, #ffe1c9, #fde4cf);
    background: linear-gradient(45deg, #ffe1c9, #fde4cf);
}
.swiper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 260px;
}
.swiper .swipe-btn {
    cursor: pointer;
}
.swiper .swipe-btn.back-to-start {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
}
.swiper .swipe-btn .circle {
    fill: #ed7000;
}
.swiper .swipe-btn .arrow {
    stroke: #ed7000;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    fill: #f4ece1;
}
.swiper .swipe-end {
    fill-rule: evenodd;
    stroke: #ed7000;
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    fill: none;
}
.swiper .dotted-line circle {
    fill: #0d3d7d;
}
.unlock {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    color: #0d3d7d;
    text-align: center;
    padding: 10px;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}
.unlock.unlocked {
    opacity: 1;
}

HTML

<div class="unlock">
        Unlocked
    </div>
</div>

Swipe to unlock SVG & GSAP，可用于需要解锁或者需要用户验证（判别非自动程序或机器人）的场合，防止恶意注册等。

html5, unlock, anti-spam

编辑器支持Emmet

快捷键

Swipe to unlock SVG & GSAP，可用于需要解锁或者需要用户验证（判别非自动程序或机器人）的场合，防止恶意注册等。

html5, unlock, anti-spam

HTML5 GSAP移动应用中点击按钮液体弥漫全屏的交互动画

HTML5 SVG画布外菜单动效 - 左侧弹性弧线滑入

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：