GSAP+Pixi.js实现的3D茶杯（咖啡杯）光照特效

coffee with pixi.js and GSAP，带倒影的茶杯。

h5, cup, coffee

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var width = window.innerWidth;
var height = window.innerHeight;

var numberOfFrames = 12;
var numberOfGeneratedParticles = 2;
var change = false;

var canvas = document.getElementById("canvas");

var app = new PIXI.Application(1400, 1050, {
    antialiasing: true,
    transparent: true,
    resolution: 1
});

canvas.appendChild(app.view);

var smoke = [];

function generateParticles(generatedParticles, change) {
    for (var i = 0; i < generatedParticles; i++) {

if (change) {
            var smokeParticle = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/smoke-particle7.png');
        } else {
            var smokeParticle = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/smoke-particle5.png');
        }

smokeParticle.anchor.set(0.5);
        smokeParticle.scale.x = 110.9 + Math.random() * 0.3;
        smokeParticle.scale.y = 110.9 + Math.random() * 0.3;
        smokeParticle.x = 550 + Math.random() * 280;
        smokeParticle.y = 175;
        smokeParticle.offset = Math.random() * 1000;
        smoke.push(smokeParticle);

app.stage.addChild(smokeParticle);

}
}

var tick = 0.1;
var itemForDelete = false;

function createSmoke() {
    generateParticles(numberOfGeneratedParticles, change);

if (smoke.length > 5000) {
        itemForDelete = true;
    } else {
        itemForDelete = false;
    }

tick += 0.1;
    for (var i = 0; i < smoke.length; i++) {

var smokeParticle = smoke[i];
        smokeParticle.scale.y = 7.55 + Math.sin(tick + smokeParticle.offset) * 0.05;
        smokeParticle.scale.x = 7.55 + Math.sin(tick + smokeParticle.offset) * 0.05;

if (i % 2) {
            smokeParticle.x += Math.random() - (Math.random() * (1.9 - 0.5) + 0.05);
        } else {
            smokeParticle.x -= Math.random() - (Math.random() * (1.9 - 0.5) + 0.05);
        }

smokeParticle.y -= Math.random() * 3;

if (itemForDelete && i < 30) {
            smoke.splice(i, 1);
        }

}

requestAnimationFrame(createSmoke);
}

var coffeeCup = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/coffee-cup.png');
var coffeeShadow = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/coffee-cup-shadow.png');
var coffeeReflect = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/coffee-cup-reflect2.png');

coffeeCup.anchor.set(0.5);

coffeeCup.x = 750;
coffeeCup.y = -1300;

coffeeShadow.x = 670;
coffeeShadow.y = 613;

coffeeShadow.scale.y = 0;
coffeeShadow.scale.x = 0;

coffeeReflect.x = 500;
coffeeReflect.y = 2000;
coffeeReflect.scale.y = 0;

app.stage.addChild(coffeeCup);
app.stage.addChild(coffeeShadow);
app.stage.addChild(coffeeReflect);

var frames = [];
var frames2 = [];

PIXI.loader
    .add('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/coffee-cup-sprite.json')
    .add('https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/coffee-cup-reflect-sprite.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    var j = "";
    for (var i = 0; i < 12; i++) {
        if (i) j = i;
        frames.push(PIXI.Texture.fromFrame('coffee-cup' + j + '.png'));
        frames2.push(PIXI.Texture.fromFrame('coffee-cup-reflect' + j + '.png'));
    }

document.addEventListener("mousemove", onMouseMove);

function onMouseMove(event) {
        var widthDivided = window.innerWidth / numberOfFrames;
        var heightDivided = window.innerHeight / 2;

var x = event.clientX;
        var y = event.clientY;

if (heightDivided > y) {
            TweenLite.to("#cold", 0.3, {
                overflow: "hidden",
                width: 0,
                opacity: 0,
                ease: Power2.easeOut
            });
            TweenLite.to("#hot", 0.3, {
                overflow: "visible",
                width: "auto",
                opacity: 1,
                ease: Power2.easeOut
            });
            change = false;
        } else {
            TweenLite.to("#hot", 0.3, {
                overflow: "hidden",
                width: 0,
                opacity: 0,
                ease: Power2.easeOut
            });
            TweenLite.to("#cold", 0.3, {
                overflow: "visible",
                width: "auto",
                opacity: 1,
                ease: Power2.easeOut
            });
            change = true;
        }

for (i = 1; i <= numberOfFrames; i++) {
            if (x <= widthDivided * i) {
                coffeeCup.setTexture(frames[i - 1]);
                coffeeReflect.setTexture(frames2[i - 1]);
                break;
            }
        }
    }

document.addEventListener("touchstart", onTouch, false);

function onTouch(event) {
        var heightDivided = window.innerHeight / 2;

var y = event.changedTouches[0].pageY;;

if (heightDivided > y) {
            TweenLite.to("#cold", 0.3, {
                overflow: "hidden",
                width: 0,
                opacity: 0,
                ease: Power2.easeOut
            });
            TweenLite.to("#hot", 1, {
                overflow: "visible",
                width: "auto",
                opacity: 1,
                ease: Power2.easeOut
            });
            change = false;
        } else {
            TweenLite.to("#hot", 0.3, {
                overflow: "hidden",
                width: 0,
                opacity: 0,
                ease: Power2.easeOut
            });
            TweenLite.to("#cold", 1, {
                overflow: "visible",
                width: "auto",
                opacity: 1,
                ease: Power2.easeOut
            });
            change = true;
        }
    }
}

setTimeout(function() {
    TweenLite.to(coffeeShadow, 1.6, {
        x: 517,
        ease: Power2.easeOut
    });
    TweenLite.to(coffeeShadow.scale, 1.6, {
        x: 1,
        y: 1,
        ease: Power2.easeOut
    });
}, 600);

TweenLite.to(coffeeReflect.scale, 2, {
    y: 1,
    ease: Power2.easeOut
});
TweenLite.to(coffeeCup, 2, {
    y: 400,
    ease: Power2.easeOut
});
TweenLite.to(coffeeReflect, 2, {
    y: 617,
    ease: Power2.easeOut
});

setTimeout(function() {
    TweenLite.to("h1", 1, {
        opacity: 0.2,
        ease: Power2.easeIn
    });
    TweenLite.to(".temp", 1, {
        opacity: 0.2,
        ease: Power2.easeIn
    });
}, 2400);

setTimeout(function() {
    createSmoke();
}, 2600);

编译

CSS

html,
body {
    position: relative;
    font-family: 'Montserrat', serif;
    background-color: #6a4f3f;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
    text-align: center;
    display: table;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/595322/brown-bg.jpg") no-repeat center center;
}
#canvas {
    display: table-cell;
    vertical-align: top;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
canvas {
    max-width: 100vw;
    max-height: 100vh;
    position: relative;
    z-index: 1;
}
h1 {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 0;
    font-weight: 800;
    opacity: 0;
    color: black;
    margin: 0;
}
#hot {
    color: #bb1919;
    font-style: italic;
    display: inline-block;
    overflow: visible;
}
#cold {
    color: #00fffc;
    font-style: italic;
    display: inline-block;
    overflow: hidden;
    width: 0;
}
.temp {
    position: absolute;
    left: 0;
    opacity: 0;
    width: 1vw;
    height: 50vh;
}
.temp-hot {
    top: 0px;
    background-color: #bb1919;
    border: 1px solid #bb1919;
}
.temp-cold {
    bottom: 0px;
    background-color: #00fffc;
    border: 1px solid #00fffc;
}
@media screen and (min-height: 1050px) and (min-width: 1400px) {
    canvas {
        max-width: 1400px;
        max-height: 1050px;
    }
}
@media screen and (orientation: portrait) {
    h1 {
        font-size: 18vw;
    }
}
@media screen and (orientation: landscape) {
    h1 {
        font-size: 17vh;
    }
}
@media screen and (max-width: 1000px) and (orientation: portrait) {
    h1 {
        font-size: 15vw;
    }
}

HTML

coffee with pixi.js and GSAP，带倒影的茶杯。

h5, cup, coffee

编辑器支持Emmet

快捷键

coffee with pixi.js and GSAP，带倒影的茶杯。

h5, cup, coffee

P5.js+Matter.js实现的卡通袋泡茶（糖精）和橡皮筋动画特效

使用anime.js和SVG实现的列表项删除破碎玻璃特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：