爱画画的女孩：鼠标移动时控制场景中女孩作画

Paint on Mouse Move，构思很巧妙的一个画画交互作品。有3D视觉效果。

h5, paint, css, 3d

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//from https://zephyo.github.io
$(document).ready(function($) {

//check if mobile

if (isMobile()) {
        $('.block-mobile').css('display', 'flex');
        return;
    }

function isMobile() {
        if (typeof window.orientation !== 'undefined') {
            return true;
        } else {
            return false;
        }
    }

var scale = 1;

var $parallax = $('#avatar'),
        $eyes = $('.eyes'),
        $upperarm = $('.upperarm'),
        $forearm = $('.forearm'),
        $hand = $('.hand'),
        cx, cy, dx, dy, tiltx, tilty, radius, degree, ratioX, ratioY, transform,
        eyeTransform = $eyes.css("transform"),
        uArmTransform = $upperarm.css("transform"),
        fArmTransform = $forearm.css("transform"),
        handTransform = $hand.css("transform"),
        newUpArm,
        newForeArm,
        newHand;

var mousePos = {},
        hue = 0;

//responsive resizing

var $window = $(window);
    var width;
    var height;
    var maxWidth = $parallax.width();
    var maxHeight = $parallax.height();

function resize() {
        width = $window.width();
        height = $window.height();

scale = Math.min(width / maxWidth, height / maxHeight) * 1.18;

$parallax.css({
            'transform': 'scale(' + scale + ')'
        });
    }

$(window).resize(resize);

resize();

//parallaxing

$(document).mousemove(function(event) {

cx = Math.ceil(width / 1.8);
        cy = Math.ceil(height / 1);
        dx = mousePos.x - cx;
        dy = mousePos.y - cy;

tiltx = (dy / cy);
        tilty = -(dx / cx);
        console.log(tiltx + ', ' + tilty);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 20);
        transform = 'scale(' + scale + ') rotate3d(' + -tiltx + ', ' + -tilty + ', 0, ' + degree + 'deg)';

$parallax.css({
            'transform': transform
        });

ratioX = mousePos.x / width;
        ratioY = mousePos.y / height;

$eyes.css('transform', eyeTransform + " translate(" + lerp(-8, 8, ratioX) + "px, " + lerp(-3, 4, ratioY) + "px)");

//upperarm 
        newUpArm = uArmTransform;
        if (ratioY < 0.5) {
            newUpArm += " rotate(" + lerp(95, -8, ratioX) + "deg)";
        } else {
            newUpArm += " rotate(" + lerp(55, 20, ratioX) + "deg)";
        }
        newUpArm += " rotateX(" + lerp(40, -10, ratioY) + "deg)";
        $upperarm.css('transform', newUpArm);

//forearm 
        newForeArm = fArmTransform;
        if (ratioY < 0.5) {
            newForeArm += " rotate(" + lerp(-145, 65, ratioX) + "deg)";
        } else {
            newForeArm += " rotate(" + lerp(-85, 45, ratioX) + "deg)";
        }
        newForeArm += " rotateX(" + lerp(0, -60, ratioY) + "deg)";
        $forearm.css('transform', newForeArm);

//hand 
        newHand = handTransform;
        if (ratioX < 0.5) {
            newHand += " rotate(" + lerp(30, 0, ratioY) + "deg)";
        } else {
            newHand += " rotate(" + lerp(-10, 10, ratioY) + "deg)";
        }
        $hand.css('transform', newHand);

});

function lerp(v0, v1, t) {
        return v0 * (1 - t) + v1 * t;
    }

// color particles

function getRandomInt(min, max) {
        return Math.round(Math.random() * (max - min + 1)) + min;
    }

$(window).mousemove(function(e) {
        mousePos.x = e.pageX;
        mousePos.y = e.pageY;
    });

$(window).mouseleave(function(e) {
        mousePos.x = -1;
        mousePos.y = -1;
    });

var draw = setInterval(function() {
        if (mousePos.x > 0 && mousePos.y > 0) {

var range = 8;

var color = "background: hsla(" + hue + ",90%,60%,0.6);";
            hue += 1;
            if (hue > 360) {
                hue = 0;
            }

var sizeInt = getRandomInt(15, 45);
            size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";

var left = "left: " + getRandomInt(mousePos.x - range - sizeInt, mousePos.x + range) + "px;";

var top = "top: " + getRandomInt(mousePos.y - range - sizeInt, mousePos.y + range) + "px;";

var style = left + top + color + size;
            $("<div class='ball' style='" + style + "'></div>").appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                $(this).remove();
            });
        }
    }, 30);

});

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Mali");
.ball {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: implode 10s ease-in-out;
    animation: implode 10s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes implode {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    5%,
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes implode {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    5%,
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
.frame,
#wrap,
html,
body,
.block-mobile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
* {
    background-repeat: no-repeat;
}
body {
    font-family: 'Mali', cursive;
    background-image: url("/uploads/1907/Background.png");
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center top;
}
.perspective {
    -webkit-perspective: 1800px;
    perspective: 1800px;
    -webkit-perspective-origin: 50% 10%;
    perspective-origin: 50% 10%;
}
.preserve-3d {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#avatar {
    position: absolute;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    left: 0;
    bottom: 0;
    right: 9vw;
    margin: auto;
    width: 770px;
    height: 890px;
    z-index: 20;
}
#avatar div {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.body {
    bottom: -40px;
    left: 0;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}
.body .head {
    top: -195px;
    left: 138px;
}
.body .head img {
    -webkit-transform: translateZ(15px);
    transform: translateZ(15px);
}
.body .head .bun {
    top: -70px;
    left: 50px;
    -webkit-transform: translateZ(-50px);
    transform: translateZ(-50px);
}
.body .head .eyes {
    top: 175px;
    left: 97px;
    -webkit-transform: translateZ(-5px);
    transform: translateZ(-5px);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}
.upperarm {
    top: 188px;
    right: -190px;
    -webkit-transform: translateZ(40px);
    transform: translateZ(40px);
    -webkit-transform-origin: 75px 70px;
    transform-origin: 75px 70px;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
.upperarm .forearm {
    bottom: -5px;
    right: -5px;
    -webkit-transform-origin: 70% 88%;
    transform-origin: 70% 88%;
    -webkit-transform: translateZ(15px) rotateX(-10deg);
    transform: translateZ(15px) rotateX(-10deg);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}
.upperarm .forearm .hand {
    top: -202px;
    left: -170px;
    -webkit-transform-origin: 70% 90%;
    transform-origin: 70% 90%;
    -webkit-transform: translateZ(10px) rotateX(10deg);
    transform: translateZ(10px) rotateX(10deg);
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.upperarm .forearm .hand .brush {
    top: -165px;
    left: 115px;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateX(-20deg) scale(1.1);
    transform: rotateX(-20deg) scale(1.1);
}
.sig {
    position: absolute;
    right: 1vh;
    bottom: 1vh;
    color: #986d5b;
}
.block-mobile {
    background: linear-gradient(to right, #ffecd2 0%, rgba(252, 182, 159, 0.6) 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c43a30;
}

HTML

<div class="upperarm">
                <img src="/uploads/1907/upperarm.png">
                <div class="forearm">
                    <img src="/uploads/1907/forearm.png">
                    <div class="hand">
                        <img src="/uploads/1907/hand.png">
                        <div class="brush">
                            <img src="/uploads/1907/brush.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>
</div>
<div id="wrap">
</div>

Paint on Mouse Move，构思很巧妙的一个画画交互作品。有3D视觉效果。

h5, paint, css, 3d

编辑器支持Emmet

快捷键

Paint on Mouse Move，构思很巧妙的一个画画交互作品。有3D视觉效果。

h5, paint, css, 3d

像素精灵图构建的风中行走（奔跑）女孩动画

使用GSAP SVG制作的办公室盆景植物动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：