使用Vue.js+Dynamics.js实现SVG可弹性拉伸变形的页面头部

Elastic Draggable SVG Header w/ Vue.js+Dynamics.js Source: https://github.com/vuejs/vue/tree/dev/examples/elastic-header# 使用鼠标拖拉页面头部，会发生弹性拉伸变形并在释放后自动恢复。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

document.body.addEventListener('touchmove', function(e) {
    return e.preventDefault();
});

Vue.component('draggable-header-view', {

template: '#header-view-template',

data: function data() {
        return {
            dragging: false,
            // quadratic bezier control point
            c: {
                x: 160,
                y: 160
            },
            // record drag start point
            start: {
                x: 0,
                y: 0
            }
        };
    },

computed: {
        headerPath: function headerPath() {
            return 'M0,0 L320,0 320,160 Q' + this.c.x + ',' + this.c.y + ' 0,160';
        },
        contentPosition: function contentPosition() {
            var dy = this.c.y - 160;
            var dampen = dy > 0 ? 2 : 4;
            return {
                transform: 'translate3d(0,' + dy / dampen + 'px,0)'
            };
        }
    },

methods: {
        startDrag: function startDrag(e) {
            e = e.changedTouches ? e.changedTouches[0] : e;
            this.dragging = true;
            this.start.x = e.pageX;
            this.start.y = e.pageY;
        },
        onDrag: function onDrag(e) {
            e = e.changedTouches ? e.changedTouches[0] : e;
            if (this.dragging) {
                this.c.x = 160 + (e.pageX - this.start.x);
                // dampen vertical drag by a factor
                var dy = e.pageY - this.start.y;
                var dampen = dy > 0 ? 1.5 : 4;
                this.c.y = 160 + dy / dampen;
            }
        },
        stopDrag: function stopDrag() {
            if (this.dragging) {
                this.dragging = false;
                dynamics.animate(this.c, {
                    x: 160,
                    y: 160
                }, {
                    type: dynamics.spring,
                    duration: 700,
                    friction: 280
                });
            }
        }
    }
});

new Vue({
    el: 'body'
});

编译

CSS

.draggable-header-view {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 320px;
    height: 560px;
    overflow: hidden;
    margin: 30px auto;
    position: relative;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.draggable-header-view h1 {
    font-weight: 300;
    font-size: 1.8em;
    margin-top: 0;
}
.draggable-header-view .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.draggable-header-view .header,
.draggable-header-view .content {
    position: relative;
    z-index: 1;
    padding: 30px;
    box-sizing: border-box;
}
.draggable-header-view .header {
    color: #fff;
    height: 160px;
}
.draggable-header-view .header a {
    color: #fff;
}
.draggable-header-view .content {
    color: #333;
    line-height: 1.5em;
}
.draggable-header-view .content a {
    color: #3f51b5;
}

HTML

<draggable-header-view>
    <template slot="header">
        <h1>Elastic Draggable SVG Header</h1>
        <p>with <a href="https://vuejs.org" target="_blank">Vue.js</a> + <a href="https://dynamicsjs.com" target="_blank">dynamics.js</a>
        </p>
    </template>
    <template slot="content">
        <p>Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However,
            the idea is that you can hide them as internal details of a Vue.js component and expose a simple Web-Component-like interface.</p>
        <p>
            <a href="#" target="_blank">[Source]</a>
        </p>
    </template>
</draggable-header-view>

Elastic Draggable SVG Header w/ Vue.js+Dynamics.js Source: https://github.com/vuejs/vue/tree/dev/examples/elastic-header# 使用鼠标拖拉页面头部，会发生弹性拉伸变形并在释放后自动恢复。

编辑器支持Emmet

快捷键

Elastic Draggable SVG Header w/ Vue.js+Dynamics.js Source: https://github.com/vuejs/vue/tree/dev/examples/elastic-header# 使用鼠标拖拉页面头部，会发生弹性拉伸变形并在释放后自动恢复。

使用CSS mask-image和background-image实现带阴影的3D球体

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：