HTML5带粒子动画特效的菜单模板

Particle menu, 卡通风格的菜单特效。可用于动漫、在线玩具购买类网站。 2016年度HTML5作品候选。

html5, template, menu

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Opts

var accuracy = 5 // The lower the more accurate but slows down pc
var total = accuracy * 200

canvas = document.getElementById('main');
ctx = canvas.getContext('2d')

int = 0;

create_canvas = function(canvas_id, url) {
    var t = this;
    this.canvas_name = document.getElementById(canvas_id);
    this.canvas_ctx = this.canvas_name.getContext('2d');
    this.url = url;
    this.canvas_image = new Image();
    this.canvas_image.src = this.url + '?' + new Date().getTime();
    this.canvas_image.setAttribute('crossOrigin', '');
    this.pixel_data = new Array();
    this.canvas_image.onload = function() {
        console.log(int)
        int++;
        if (int == 4) {
            $('.l').fadeOut(100);
            setTimeout(function() {
                $('.bar').fadeIn(200);
            }, 100)

}

t.canvas_ctx.drawImage(t.canvas_image, 0, 0, t.canvas_ctx.canvas.width, t.canvas_ctx.canvas.height); // Change
        get_image_data(t.canvas_ctx, t.pixel_data);
    }
    this.animate_to_image = function() {

if (this.pixel_data.length == 0) {
            setTimeout(function() {
                t.animate_to_image();

}, 500);
        }

for (i in pixels) {
            pixels[i].resetPixel();
        }

for (i in t.pixel_data) {
            if (pixels[i]) {
                pixels[i].x = t.pixel_data[i].x;
                pixels[i].y = t.pixel_data[i].y;
                pixels[i].r = t.pixel_data[i].r;
                pixels[i].g = t.pixel_data[i].g;
                pixels[i].b = t.pixel_data[i].b;
                pixels[i].a = t.pixel_data[i].a;
                pixels[i].size = t.pixel_data[i].size;
            }
        }

animate(pixels);
    }
}

var def = new create_canvas('def', '/uploads/161101/morph1.png');
var statistics = new create_canvas('statistics', '/uploads/161101/morph2.png');
var security = new create_canvas('security', '/uploads/161101/morph3.png');
var notifications = new create_canvas('notifications', '/uploads/161101/morph4.png');
var users = new create_canvas('users', '/uploads/161101/morph5.png');

def.animate_to_image();

// Create pixel
var pixel = function() {
    this.from_x = ctx.canvas.width / 2;
    this.from_y = ctx.canvas.width / 2;
    this.from_r = Math.floor(Math.random() * 255);
    this.from_g = Math.floor(Math.random() * 255);
    this.from_b = Math.floor(Math.random() * 255);
    this.x = 0;
    this.y = 0;
    this.size = 4;
    this.r = Math.floor(Math.random() * 255);
    this.g = Math.floor(Math.random() * 255);
    this.b = Math.floor(Math.random() * 255);
    this.resetPixel = function() {
        this.x = ctx.canvas.width / 2;
        this.y = ctx.canvas.height / 2;
        this.r = 0;
        this.g = 0;
        this.b = 0;
        this.a = 0;
        this.size = 0;
    }
}

// Create pixel array
var pixels = [];
for (var i = 0; i < total; i++) {
    pixels.push(new pixel())
}

// Animate pixels
function animate(obj) {
    if (obj) {
        obj.sort(function() {
            return 0.5 - Math.random()
        });
        for (var i in obj) {
            TweenLite.fromTo(obj[i], 1.78, {
                r: obj[i].from_r,
                g: obj[i].from_g,
                b: obj[i].from_b,
                a: obj[i].from_a,
                x: obj[i].from_x,
                y: obj[i].from_y,
                //ease: Elastic.easeOut.config(1.2, 0.3)
            }, {
                x: obj[i].x,
                y: obj[i].y,
                r: obj[i].r,
                g: obj[i].g,
                a: obj[i].a,
                b: obj[i].b,
                ease: Elastic.easeOut.config(1.2, .35),
                onUpdate: drawImage,
                onUpdateParams: [obj[i], i],
                delay: .0002 * i
            });
        }
    }

}

// Draw
function drawImage(obj, index) {

if (index == 0) {
        //ctx.clearRect(0, 0, 500, 500);
    }
    ctx.beginPath();
    ctx.arc(obj.x, obj.y, obj.size, 0, 2 * Math.PI, false);
    ctx.shadowColor = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
    //ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillStyle = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
    ctx.lineWidth = 2;
    ctx.fill();
    obj.from_x = obj.x;
    obj.from_y = obj.y;
    obj.from_r = obj.r;
    obj.from_g = obj.g;
    obj.from_b = obj.b;
    obj.from_a = obj.a;

}

$('.bar_item').mouseenter(function() {
    ctx.clearRect(0, 0, 500, 500);
    var t = $(this).data('canvas');
    var c = $(this).data('color')
    eval(t).animate_to_image();
    TweenLite.to('.overlay', 1, {
        backgroundColor: c,
        opacity: 1,
        backgroundPosition: Math.random() * 600 + 100 + "px " + Math.random() * 600 + 100 + "px",
        ease: Power3.easeOut
    });
    TweenLite.fromTo('.buy', .14, {
        right: '-20px',
        opacity: 1
    }, {
        right: '-100px',
        opacity: 0
    })
    setTimeout(function() {
        TweenLite.fromTo('.buy', .14, {
            right: '-100px',
            opacity: 0
        }, {
            right: '-20px',
            opacity: 1
        })
    }, 140)
})

$('.bar_item').mouseout(function() {
    // def.animate_to_image();
})

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
#def,
#statistics,
#security,
#notifications,
#users {
    display: none;
}
* {
    box-sizing: border-box;
}
.i {
    background: white;
    height: 100px;
    position: absolute;
    top: 50%;
    height: 250px;
    width: 100%;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
    border-radius: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #a98578;
}
body {
    color: White;
    font-family: 'Indie Flower', cursive;
    font-weight: 900;
    margin: 0;
    padding: 0;
}
#main {
    position: absolute;
    right: -30px;
    z-index: 10;
    top: 50%;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #a75b38;
    background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png");
    z-index: 2;
    pointer-events: none;
    background-size: 230px;
    background-blend-mode: multiply;
}
.l {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.c {
    width: 450px;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}
.buy {
    position: absolute;
    right: -20px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 10px 30px;
    bottom: -24px;
    opacity: 0;
    z-index: 11;
    background: #b8e057;
    color: #7a923f;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.18);
}
.bar {
    display: none;
    margin-top: 12px;
    position: absolute;
    bottom: 60px;
    width: 200px;
    height: 250px;
    z-index: 2;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.bar_item {
    display: block;
    text-align: left;
    margin-right: -3px;
    cursor: pointer;
    font-weight: 200;
    padding: 8px 28px;
    font-size: 15px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.bar_item span {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}
.bar_item:nth-of-type(1):hover {
    color: #d44473;
}
.bar_item:nth-of-type(2):hover {
    color: #fbd05f;
}
.bar_item:nth-of-type(3):hover {
    color: #5bb3ca;
}
.bar_item:nth-of-type(4):hover {
    color: #e6a13b;
}

HTML

Particle menu, 卡通风格的菜单特效。可用于动漫、在线玩具购买类网站。 2016年度HTML5作品候选。

html5, template, menu

编辑器支持Emmet

快捷键

Particle menu, 卡通风格的菜单特效。可用于动漫、在线玩具购买类网站。 2016年度HTML5作品候选。

html5, template, menu

HTML5带文本中划线切分动效的菜单模板

HTML5 GSAP带镜像特效的彩色粒子掉落动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：