很棒的带图片自动漂浮特效的照片墙

自适应屏幕宽度。使用CSS3 translate3d属性实现。

模板，相册

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

第三方库
作品简介 3381
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.addEventListener('load', function() {

"use strict";

var panels = [];

function Pan(div) {
        this.div = div;
        this.img = div.firstChild;
        this.iw = this.img.width;
        this.ih = this.img.height;
        this.cx = -this.iw / 2;
        this.cy = -this.ih / 2;
        this.t = Math.random() * 10;
    }

Pan.prototype.anim = function() {
        var nw = this.div.offsetWidth;
        var nh = this.div.offsetHeight;

if (pointer.target === this.img) {

var nx = this.div.offsetLeft;
            var ny = this.div.offsetTop;
            var x = Math.max(-this.iw + nw, Math.min(0, (-(pointer.x - nx) * (this.iw - nw)) / nw));
            var y = Math.max(-this.ih + nh, Math.min(0, (-(pointer.y - ny) * (this.ih - nh)) / nh));

} else {

var mx = (this.iw - nw) * .5;
            var my = (this.ih - nh) * .5;
            var x = -mx * (1 + Math.cos(2 * this.t));
            var y = -my * (1 + Math.sin(3 * this.t));

}
        this.cx += (x - this.cx) * .1;
        this.cy += (y - this.cy) * .1;

this.img.style.transform = 'translate3d(' + (this.cx) + 'px, ' + (this.cy) + 'px ,0)';

this.t += 0.003;

}

function run() {

requestAnimationFrame(run);
        panels.forEach(function(p) {
            p.anim();
        });

}

var divs = document.querySelectorAll('div');
    for (var i = 0, div; div = divs[i]; i++) {
        panels.push(new Pan(div));
    }

run();

});

编译

CSS

HTML

自适应屏幕宽度。使用CSS3 translate3d属性实现。

模板，相册

编辑器支持Emmet

快捷键

自适应屏幕宽度。 使用CSS3 translate3d属性实现。

模板，相册

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

自适应屏幕宽度。使用CSS3 translate3d属性实现。