jQuery.js+Rebound.js 类FaceBook Messenger的可拖拉聊天头像

Chatheads style animations. Drag and drop chat heads like Facebook Messenger

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

// requestAnimationFrame polyfill
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

var draggableEl = document.querySelector('[data-drag]'),
    magnet = document.querySelector('.magnet-zone');

// create a SpringSystem and a Spring with a bouncy config.
var springSystem = new rebound.SpringSystem(),
    spring = springSystem.createSpring(100, 7.5),
    magnetSpring = springSystem.createSpring(450, 13),
    x = ($('body').width() / 2) - 30,
    y = 10,
    springDestX,
    springDestY,
    magnetX,
    magnetY,
    events = [];

spring.setCurrentValue(1).setAtRest();
magnetSpring.setCurrentValue(1).setAtRest();

function getCenteredCoordinates(el1, el2) {
    var rect1 = el1.getBoundingClientRect(),
        rect2 = el2.getBoundingClientRect(),
        x1 = (rect1.width / 2) + rect1.left,
        y1 = (rect1.height / 2) + rect1.top;

return {
        x: x1 - (rect2.width / 2),
        y: y1 - (rect2.height / 2)
    };
}

// Add a listener to the spring. Every time the physics
// solver updates the Spring's value onSpringUpdate will
// be called.
function onSpringUpdate(spring) {
    // drop the spring when the user has let go
    // otherwise update x/y with springy values
    if (!$(draggableEl).hasClass('edge')) {
        var val = spring.getCurrentValue(),
            coords = getCenteredCoordinates(magnet, draggableEl),
            elRect = draggableEl.getBoundingClientRect();

x = rebound.MathUtil.mapValueInRange(val, 0, 1, coords.x, springDestX || elRect.left);
        y = rebound.MathUtil.mapValueInRange(val, 0, 1, coords.y, springDestY || elRect.top);
        moveToPos(x, y);
    }
}

spring.addListener({
    onSpringUpdate: onSpringUpdate
});
magnetSpring.addListener({
    onSpringUpdate: onSpringUpdate
});

function vibrate(ms) {
    if (navigator.vibrate) {
        // vibration API supported
        navigator.vibrate(ms || 50);
    }
}

// the draw function
function moveToPos(newX, newY) {
    var el = draggableEl;

newX = newX || x;
    newY = newY || y;

// finally apply the x, y to the top, left of the circle
    el.style.transform =
        el.style.webkitTransform =
        el.style.MozTransform = 'translate(' + Math.round(newX, 10) + 'px, ' + Math.round(newY, 10) + 'px)';
}

function animate() {
    window.requestAnimationFrame(animate);
    moveToPos();
}

// kick off animate
animate();

function isOverlapping(el1, el2) {
    var rect1 = el1.getBoundingClientRect(),
        rect2 = el2.getBoundingClientRect();

return !(
        rect1.top > rect2.bottom ||
        rect1.right < rect2.left ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right
    );
}

function moveMagnet(x, y) {
    var dist = 12,
        width = $('body').width() / 2,
        height = $('body').height(),
        direction = x > width ? 1 : -1,
        percX = x > width ? (x - width) / width : -(width - x) / width,
        percY = Math.min(1, (height - y) / (height / 2));

magnet.style.marginLeft = Math.round(dist * percX) + 'px';
    magnet.style.marginBottom = Math.round(dist * percY) + 'px';
}

function trackEvent(event) {
    if (events.length > 5) {
        events.pop();
    }

events.push(event);
}

function move(event) {
    var el = draggableEl,
        magnetRect = magnet.getBoundingClientRect(),
        elRect = el.getBoundingClientRect();

newX = this._posOrigin.x + event.pageX - this._touchOrigin.x;
    newY = this._posOrigin.y + event.pageY - this._touchOrigin.y;

moveMagnet(newX + (elRect.width / 2), newY + (elRect.height / 2));

startMoving();

var touchPos = {
        top: newY,
        right: newX + elRect.width,
        bottom: newY + elRect.height,
        left: newX
    };

overlapping = !(
        touchPos.top > magnetRect.bottom ||
        touchPos.right < magnetRect.left ||
        touchPos.bottom < magnetRect.top ||
        touchPos.left > magnetRect.right
    );

springDestX = newX;
    springDestY = newY;

if (overlapping) {
        // center the circle in the magnetic zone
        var mx = (magnetRect.width / 2) + magnetRect.left;
        var my = (magnetRect.height / 2) + magnetRect.top;
        newX = mx - (elRect.width / 2);
        newY = my - (elRect.height / 2);

if (!$(el).hasClass('overlap')) {
            // set magnetSpring
            magnetSpring.setVelocity(5).setEndValue(0);
            spring.setCurrentValue(0).setAtRest();

vibrate(25);
        }

$(magnet).toggleClass('overlap', true);
        $(el).toggleClass('overlap', true);

// if the spring is still moving then dont set x/y
        if (!springSystem.getIsIdle()) return;
    } else {

if ($(el).hasClass('overlap')) {
            spring.setEndValue(1);
            magnetSpring.setCurrentValue(1).setAtRest();
        }

$(magnet).removeClass('overlap');
        $(el).removeClass('overlap');
    }

// update x/y values
    x = newX;
    y = newY;
};

$(draggableEl)
    .on('movestart', onTouchStart)
    .on('move', trackEvent)
    .on('move', move)
    .on('moveend', onTouchEnd);

function onTouchStart(event) {
    var rect = this.getBoundingClientRect();

startTouching();

this._touchOrigin = {
        x: event.pageX,
        y: event.pageY
    };
    this._posOrigin = {
        x: rect.left,
        y: rect.top
    };
}

function getVelocity() {
    var event = events[events.length - 1];
    return {
        x: event.velocityX,
        y: event.velocityY
    };
}

function stopTouching() {
    $('body').removeClass('touching');
}

function startTouching() {
    $('body').addClass('touching');
}

function startMoving() {
    $('body').addClass('moving');
}

function stopMoving() {
    $('body').removeClass('moving');
    magnet.style.marginBottom = magnet.style.marginLeft = '0px';
}

function onTouchEnd(event) {
    var el = $(draggableEl),
        velocity = getVelocity();

if (!el.hasClass('overlap')) {
        flingWithVelocity(velocity);
        stopTouching();
        stopMoving();
    }
}

function distanceOverTime(velocity, ms) {
    return velocity * ms;
}

function decelerate(speed) {
    return speed > 0.01 || speed < -0.01 ? (speed - (speed * .05)) : 0;
}

// simulate gravitational pull
function addGravity(deltaTimeInMs) {
    var gravity = -9.5 / 2000;
    return gravity * deltaTimeInMs;
}

var timer;

function flingWithVelocity(velocity) {
    var ms = 10,
        rect = draggableEl.getBoundingClientRect(),
        fullscreen = $('body').width(),
        halfscreen = fullscreen / 2,
        height = $('body').height() - rect.height - 10,
        width = $('body').width() - rect.width + 10;

if (x > halfscreen && x < width) {
        velocity.x -= addGravity(ms);
    } else if (x < halfscreen && x > 0) {
        velocity.x += addGravity(ms);
    } else {
        velocity.x = velocity.y = 0;
    }

var newX = x + distanceOverTime(velocity.x, ms),
        newY = y + distanceOverTime(velocity.y, ms);

x = Math.max(-10, Math.min(width, newX));
    y = Math.max(10, Math.min(height, newY));

velocity.x = decelerate(velocity.x);
    velocity.y = decelerate(velocity.y);

// recursively do this until there's no more velocity
    // every N ms
    if (velocity.x || velocity.y) {
        if (timer) clearTimeout(timer);

timer = setTimeout(function() {
            flingWithVelocity(velocity);
        }, ms);
    }
}

编译

CSS

.thing,
.thing .circle,
.magnet {
    border-radius: 50%;
    width: 64px;
    height: 64px;
}
.thing .circle,
.magnet-zone {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.explain {
    opacity: 0.5;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: 'Open Sans', 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.8, transparent), to(rgba(0, 0, 0, 0.25)));
    background: -webkit-linear-gradient(transparent 80%, rgba(0, 0, 0, 0.25) 100%);
    background: linear-gradient(transparent 80%, rgba(0, 0, 0, 0.25) 100%);
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}
* {
    /* For some Androids */
    
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
.thing {
    position: absolute;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0px;
    cursor: pointer;
}
.thing .circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #888;
    background-image: url(http://gravatar.com/avatar/84eac3a27d1acf0ef0d835d92c999b0d?s=300);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 50ms linear;
    transition: transform 50ms linear;
}
.thing.edge {
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
}
.magnet-zone {
    pointer-events: none;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
    transition: transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
}
.magnet-zone {
    position: absolute;
    text-align: center;
    bottom: 10px;
    padding: 10px 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 100%) translateZ(0);
    transform: translate(-50%, 100%) translateZ(0);
}
.magnet-zone.overlap .magnet {
    -webkit-transform: scale(1.08) translateZ(0);
    transform: scale(1.08) translateZ(0);
}
.touching .circle {
    -webkit-transform: scale(0.9) translateZ(0);
    transform: scale(0.9) translateZ(0);
}
.moving .container:before {
    opacity: 1;
}
.moving .magnet-zone {
    -webkit-transform: translate(-50%, 0) translateZ(0);
    transform: translate(-50%, 0) translateZ(0);
}
.magnet-zone:after {
    pointer-events: none;
    content: '\00d7';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) translateZ(0);
    transform: translateY(-50%) translateZ(0);
    text-align: center;
    font-size: 2em;
    font-weight: 100;
    color: #fff;
}
.magnet {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
    -webkit-transform: scale(0.7) translateZ(0);
    transform: scale(0.7) translateZ(0);
    border: 2px solid #fff;
}

HTML

Chatheads style animations. Drag and drop chat heads like Facebook Messenger

编辑器支持Emmet

快捷键

Chatheads style animations. Drag and drop chat heads like Facebook Messenger

babylon.js + react.js很棒的3d图表代码示例

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：