蒙娜丽莎画像的像素化特效

创建一个方块阵列，渐变改变每个方块的透明度，来达到像素网格波动的动画特效。 2016年度作品候选。

gsap, pixel, art

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var image = '/uploads/161001/mona.jpg';
var tileWrapper = document.querySelector('.tiles');
var rows = 12;
var cols = 8;
var tiles = createTiles(rows, cols, tileWrapper);

var maxOpacities = [
    [0.0, 0.2, 0.4, 0.6, 0.6, 0.4, 0.2, 0.0],
    [0.2, 0.4, 0.8, 1.0, 1.0, 0.6, 0.4, 0.2],
    [0.2, 0.4, 1.0, 1.0, 1.0, 0.8, 0.6, 0.2],
    [0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
    [0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
    [0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
    [0.2, 0.4, 0.8, 1.0, 1.0, 0.8, 0.6, 0.2],
    [0.2, 0.4, 0.6, 0.8, 0.8, 0.6, 0.4, 0.1],
    [0.1, 0.2, 0.4, 0.4, 0.4, 0.4, 0.2, 0.1],
    [0.0, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.1],
    [0.0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.0, 0.0],
    [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
];

animateTiles(tiles);

function animateTiles(tiles) {
    var timelines = [];

for (var i = 0; i < tiles.length; i++) {
        var row = Math.floor(i / 8);
        var col = i % 8;
        var variance = 0.4;
        var maxOpacity = maxOpacities[row][col];
        var minOpacity = Math.max(0, maxOpacity - variance);
        var duration = random(0.75, 1);

if (maxOpacity === 0) {
            TweenMax.set(tiles[i], {
                opacity: 0
            });
            continue;
        }

var tween = TweenMax.fromTo(tiles[i], duration, {
            opacity: minOpacity
        }, {
            opacity: maxOpacity,
            ease: Sine.easeInOut
        });

timelines[i] = new TimelineMax({
            repeat: -1,
            yoyo: true
        });
        timelines[i].add(tween);

var start = Math.random() * duration;
        timelines[i].seek(start);
    }
}

function createTiles(rows, cols, tileWrapper) {
    var tiles = [];

for (var row = 0; row < rows; row++) {
        for (var col = 0; col < cols; col++) {
            var tile = document.createElement('div');
            tile.className = 'tile';
            tile.style.backgroundImage = 'url(' + image + ')';
            tile.style.backgroundPosition = (-col * 50) + 'px ' + (-row * 50) + 'px';
            tiles.push(tile);
            tileWrapper.appendChild(tile);
        }
    }

return tiles;
}

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

编译

CSS

HTML

创建一个方块阵列，渐变改变每个方块的透明度，来达到像素网格波动的动画特效。 2016年度作品候选。

gsap, pixel, art

编辑器支持Emmet

快捷键

创建一个方块阵列，渐变改变每个方块的透明度，来达到像素网格波动的动画特效。 2016年度作品候选。

gsap, pixel, art

html5 p5.js点彩画法动画（蒙娜丽莎）

Three.js + GSAP很棒的图像朦胧模糊化（光束）特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：