使用VueJS构建的毛毛虫蠕动导航菜单动画

Vue.js Gooey moving navigation

vue, navigation, menu

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var buttonSize = 30;
var buttonMargin = 30;

new Vue({
    el: '#js-ui',

data: function data() {
        return {
            direction: '',
            scene: 0,
            maxScene: 8
        };

methods: {
        selectScene: function selectScene(sceneId) {
            var between = Math.abs(this.scene - sceneId);

if (sceneId < this.scene) this.direction = 'up';
            else
                this.direction = 'down';

var tl = new TimelineMax();

if (this.direction === 'up') {
                tl.
                to('#js-scene_nav_mark', 0.6, {
                    ease: Power3.easeIn,
                    width: (buttonSize + buttonMargin) * between + buttonSize + 'px',
                    x: (buttonSize + buttonMargin) * sceneId + 'px'
                }).

to('#js-scene_nav_mark', 0.6, {
                    ease: Power3.easeOut,
                    width: buttonSize
                });

} else if (this.direction === 'down') {
                tl.
                to('#js-scene_nav_mark', 0.6, {
                    ease: Power3.easeIn,
                    width: (buttonSize + buttonMargin) * between + buttonSize + 'px'
                }).

to('#js-scene_nav_mark', 0.6, {
                    ease: Power3.easeOut,
                    width: buttonSize,
                    x: (buttonSize + buttonMargin) * sceneId + 'px'
                });

}

this.scene = sceneId;
        }
    },

mounted: function mounted() {
        this.selectScene(5);
    }
});

编译

CSS

HTML

Vue.js Gooey moving navigation

vue, navigation, menu

编辑器支持Emmet

快捷键

Vue.js Gooey moving navigation

vue, navigation, menu

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

使用VueJS构建的葡萄酒标签制造器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：