HTML5 手机屏幕下拉（下刷）动作的弹性刷新效果

下拉时，出现弧度。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

var animating = false;

var $body = $(".demo__body");
    var $content = $(".demo__content");
    var $line = $(".demo__svg__line");
    var $smile = $(".demo__svg__smile");
    var $bgPath = $(".demo__svg-bg__path");

var resetD = "M0,0 C125,0 250,0 375,0 S375,0 375,0 L375,667 0,667z";
    var smileInit = "M176.61,25 Q187,19 197.39,25";
    var smileMid = "M176.61,25 Q187,25 197.39,25";
    var smileEnd = "M176.61,25 Q187,34 197.39,25";

var totalLen = $line[0].getTotalLength();
    var upperLen = 187;
    var circleLen = totalLen - upperLen;
    var minLineLen = 60;
    var lineDragBoundries = upperLen - minLineLen;

var pullDeltaY = 0;
    var pullSlowCoef = 1.2;
    var maxPullY = 150;
    var minReleaseY = 120;
    var contentYCoef = 0.4;
    var maxContentY = maxPullY * contentYCoef;
    var bodyOffsetX = 0;
    var bodyW = $body.outerWidth();

var resetAT = 500;
    var releaseStep1AT = 800;
    var releaseWaitTime = 3000;

function SvgAddClass(el, cl) {
        var regEx = new RegExp('(?:^|\\s)' + cl + '(?!\\S)', "gi");
        if (regEx.test(el.attr("class"))) return;
        el.attr("class", el.attr("class") + " " + cl);
    };

function SvgRemoveClass(el, cl) {
        var regEx = new RegExp('(?:^|\\s)' + cl + '(?!\\S)', "gi");
        el.attr("class", el.attr("class").replace(regEx, ""));
    };

function SvgPathTween(from, to, time, easing) {
        var regex = /\d+(\.\d{1,2})?/g;
        var fromD = from.attr("d");
        var fm = fromD.match(regex);
        var tm = to.match(regex);
        var diff = [];
        for (var i = 0; i < fm.length; i++) {
            diff.push(+fm[i] - (+tm[i]));
        }
        var time = time || 600;
        var curFrame = 0;
        var frames = time / 1000 * 60;
        var easing = easing || "elastic";

animate();
    };

function pullChange(y, x) {
        var pullY = (y <= maxPullY) ? y : maxPullY;
        if (pullY < 0) pullY = 0;
        var pullCoef = pullY / maxPullY;
        var sdo = circleLen + pullCoef * lineDragBoundries;
        var pullYCont = +(pullY * contentYCoef).toFixed(2);
        var bodyX = parseInt(x - bodyOffsetX, 10);
        if (bodyX < 0) bodyX = 0;
        if (bodyX > bodyW) bodyX = bodyW;
        var leftX = bodyX - 50;
        if (leftX < 0) leftX = 0;
        var rightX = bodyX + 50;
        if (rightX > bodyW) rightX = bodyW;

$body.css("transform", "translate3d(0," + pullY + "px,0)");
        $content.css("transform", "translate3d(0," + pullYCont + "px,0)");
        $line.css("stroke-dashoffset", sdo);

$bgPath.attr("d", "M0,0 C" + (leftX - 25) + ",0 " + (leftX) + "," + pullYCont + " " + bodyX + "," + pullYCont + " S" + (rightX + 25) + ",0 375,0 L375,667 0,667z");
    };

function reset() {
        $body.addClass("reset");
        $content.addClass("reset");
        SvgAddClass($line, "reset");
        SvgPathTween($bgPath, resetD);

setTimeout(function() {
            $body.removeClass("reset").attr("style", "");
            $content.removeClass("reset").attr("style", "");
            SvgRemoveClass($line, "reset");
            $line.attr("style", "");
            animating = false;
        }, resetAT);
    };

function performMagic() {
        $body.addClass("waiting");
        SvgAddClass($line, "show-circle");
        SvgPathTween($bgPath, resetD);
        $content.addClass("reset");

setTimeout(function() {
            SvgAddClass($line, "rotating");
        }, releaseStep1AT * 0.32);

setTimeout(function() {
            $content.removeClass("reset").attr("style", "");

SvgAddClass($smile, "active");

setTimeout(function() {
                SvgPathTween($smile, smileMid, 300, "inCubic");

setTimeout(function() {
                    SvgPathTween($smile, smileEnd, 300, "inCubic");

SvgAddClass($smile, "minified");
                }, 500);
            }, 700);

}, resetAT);

setTimeout(function() {
            SvgRemoveClass($line, "rotating");
            SvgRemoveClass($line, "show-circle");
            SvgAddClass($line, "reset");
            $body.removeClass("waiting").addClass("reset");

setTimeout(function() {
                $body.removeClass("reset").attr("style", "");
                SvgRemoveClass($line, "reset");
                $line.attr("style", "");
                SvgRemoveClass($smile, "minified");
                SvgRemoveClass($smile, "active");
                SvgPathTween($smile, smileInit, 50, "inCubic");
                animating = false;
            }, resetAT);

}, releaseWaitTime);

};

function release() {
        animating = true;
        if (pullDeltaY < minReleaseY) {
            reset();
        } else {
            performMagic();
        }
    };

$(document).on("mousedown touchstart", ".demo__body", function(e) {
        if (animating) return;
        var startY = e.pageY || e.originalEvent.touches[0].pageY;
        bodyOffsetX = $body.offset().left;

$(document).on("mousemove touchmove", function(e) {
            var y = e.pageY || e.originalEvent.touches[0].pageY;
            var x = e.pageX || e.originalEvent.touches[0].pageX;
            pullDeltaY = (y - startY) / pullSlowCoef;
            if (!pullDeltaY) return;
            pullChange(pullDeltaY, x);
        });

$(document).on("mouseup touchend", function() {
            $(document).off("mousemove touchmove mouseup touchend");
            if (!pullDeltaY) return;
            release();
        });
    });

});

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    font-size: 62.5%;
}
body {
    background: #393a56;
}
.phone {
    position: relative;
    width: 42.3rem;
    height: 87.9rem;
    padding: 10.2rem 2rem;
    margin: 3rem auto 3rem;
    background: #000;
    border-radius: 5.6rem;
    border: 0.4rem solid #b5b5b5;
}
.phone__screen {
    overflow: hidden;
    position: relative;
    width: 37.5rem;
    height: 66.7rem;
    background: #39425a;
}
.demo {
    position: relative;
    height: 100%;
}
.demo__top {
    position: relative;
    height: 9rem;
    padding-top: 3rem;
    text-align: center;
    font-size: 0;
    color: #ceced6;
    text-transform: uppercase;
}
.demo__text {
    font-size: 1.2rem;
    margin-bottom: 1.6rem;
}
.demo__text.half {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.demo__body {
    position: relative;
    min-height: 66.7rem;
    padding: 1.5rem;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.demo__body.reset {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}
.demo__body.waiting {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translate3d(0, 5rem, 0) !important;
    transform: translate3d(0, 5rem, 0) !important;
}
.demo__svg-bg {
    overflow: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.demo__svg-bg__path {
    fill: #fafafb;
    stroke: transparent;
}
.demo__content.reset {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}
.demo__el {
    position: relative;
    height: 16rem;
    margin-bottom: 2rem;
    background: #fff;
}
.demo__el:before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 1.5rem;
    background: #5a534f;
}
.demo__el:after {
    content: "";
    position: absolute;
    left: 12rem;
    top: 1.5rem;
    width: 21rem;
    height: 1.5rem;
    border-radius: 0.7rem;
    background: #5a534f;
    color: #5a534f;
    box-shadow: 0 3rem, 0 6rem;
}
.demo__svg {
    overflow: visible;
    position: absolute;
    left: 0;
    top: 8.7rem;
    width: 100%;
    height: 3.7rem;
}
.demo__svg__line {
    stroke: #4eddc8;
    stroke-dashoffset: 98.53px;
    stroke-dasharray: 285.53px, 285.53px;
    -webkit-transform-origin: 187px 19px;
    -ms-transform-origin: 187px 19px;
    transform-origin: 187px 19px;
}
.demo__svg__line.show-circle {
    -webkit-transition: stroke-dashoffset 0.325s;
    transition: stroke-dashoffset 0.325s;
    stroke-dashoffset: -187px !important;
}
.demo__svg__line.rotating {
    -webkit-animation: rotating 0.5s infinite linear;
    animation: rotating 0.5s infinite linear;
}
.demo__svg__line.reset {
    -webkit-transition: stroke-dashoffset 0.5s;
    transition: stroke-dashoffset 0.5s;
    stroke-dashoffset: 98.53px !important;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
.demo__svg__smile {
    stroke: #4eddc8;
    stroke-dashoffset: 30px;
    stroke-dasharray: 30px, 30px;
    -webkit-transform-origin: 187px 19px;
    -ms-transform-origin: 187px 19px;
    transform-origin: 187px 19px;
    opacity: 0;
    -webkit-transition: opacity 0.1s, stroke-dashoffset 0.5s;
    transition: opacity 0.1s, stroke-dashoffset 0.5s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
.demo__svg__smile.active {
    opacity: 1;
    stroke-dashoffset: 0;
}
.demo__svg__smile.minified {
    -webkit-transition: stroke-dashoffset 0.5s 0.85s, opacity 0.1s 1.25s;
    transition: stroke-dashoffset 0.5s 0.85s, opacity 0.1s 1.25s;
    stroke-dashoffset: 25px;
    opacity: 0;
    -webkit-animation: rotating 0.5s 0.35s infinite linear;
    animation: rotating 0.5s 0.35s infinite linear;
}
@-webkit-keyframes rotating {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

<div class="phone">
    <div class="phone__screen">
        <div class="demo__top">
            <p class="demo__text">Pull down content part</p>
            <p class="demo__text half">Activities</p>
            <p class="demo__text half">Saved</p>
            <svg class="demo__svg" viewBox="0 0 375 37">
                <path class="demo__svg__line" stroke-width="3" fill="none" d="M0,1 187,1 a18,18 0 0,1 0,36 a18,18 0 0,1 -12.6,-30.6" />
                <path class="demo__svg__smile" stroke-width="3" fill="none" d="M176.61,25 Q187,14 197.39,25" />
            </svg>
        </div>
        <div class="demo__body">
            <svg class="demo__svg-bg" viewBox="0 0 375 667">
                <path class="demo__svg-bg__path" d="M0,0 C125,0 250,0 375,0 S375,0 375,0 L375,667 0,667z" />
            </svg>
            <div class="demo__content">
                <div class="demo__el"></div>
                <div class="demo__el"></div>
                <div class="demo__el"></div>
            </div>
        </div>
    </div>
</div>

下拉时，出现弧度。

编辑器支持Emmet

快捷键

下拉时，出现弧度。

HTML5 WebGL屏幕闪屏（电视机花屏）动画特效的着色器代码

HTML5 GSAP 在手机上展示地图位置的动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：