使用SVG网格遮罩实现的碎片化图片特效

SVG Grid Mask With Color effect

svg, mask, image, effect

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

// wait until window, stylesheets, images, links, and other media assets are loaded
    window.onload = function() {

// All ready, start!
        init();

};

});

// We manipulate a few of the DOM elements via JavaScript in order to minimise the amount of editing that would otherwise have to be done to the DOM elements every time the ratio/size of the image is altered

function init() {

// Get the image size
    var img = document.querySelector("#image").getBBox();
    // Update the <symbol> tag's viewbox based on the image size
    document.getElementById("Source").setAttribute("viewBox", "0 0 " + img.width + " " + img.height);

// Calculate the ratio of the image
    var ratio = calculateRatio(img.width, img.height);

// Get the main SVG tag
    var svg = document.getElementById("svg");

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

// Update its height to match the image ratio
    container.style.height = updateHeight(container.offsetWidth, ratio) + "px";
    TweenMax.set(filterMaskArea, {
        attr: {
            height: function() {
                return updateHeight(container.offsetWidth, ratio);
            }
        }
    });

// Start listening for the mouse
    container.addEventListener("mouseenter", onEnter);
    container.addEventListener("mouseleave", onLeave);

function onEnter(e) {
        // console.log(e.target.id);
        container.addEventListener("mousemove", onMove);
    }

function onLeave(e) {
        container.removeEventListener("mousemove", onMove);
    }

function onMove(e) {
        var width = e.clientX - container.getBoundingClientRect().left;

TweenMax.set(filterMaskArea, {
            attr: {
                width: width
            }
        })

}

// Calculate the aspect ratio of the image.
    function calculateRatio(w, h) {
        return Math.max(w, h) / Math.min(w, h);
    }

// Return an updated height based on  width/ratio
    function updateHeight(width, ratio) {
        return Math.round(width / ratio);
    }

// Create X squares of a size along a grid the size of the image
    var squareSize = 20;
    var squares = {
        ttlHorz: squaresPerLength(svg.getBBox().width, squareSize),
        ttlVert: squaresPerLength(svg.getBBox().height, squareSize),
    }

function squaresPerLength(width, size) {
        return width / size;
    }

var g = document.getElementById("grid");
    var arr = [];

// Loop thru the total squares and create the grid
    for (var i = 0; i < squares.ttlHorz; i++) {
        for (var j = 0; j < squares.ttlVert; j++) {
            var square = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            square.setAttribute("width", squareSize);
            square.setAttribute("height", squareSize);
            square.setAttribute("x", i * squareSize);
            square.setAttribute("y", j * squareSize);

arr.push(square);
            g.appendChild(square);
        }
    }

function shuffle(array) {
        var currentIndex = array.length,
            temporaryValue, randomIndex;

// While there remain elements to shuffle...
        while (0 !== currentIndex) {

// Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

// And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

return array;
    }

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

var newArr = shuffle(arr)

// Animate the squares
    TweenMax.staggerTo(newArr, 1.5, {
        autoAlpha: 0,
        repeat: -1,
        repeatDelay: 3,
        yoyo: true,
        ease: Power3.easeInOut,
        cycle: {
            delay: [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9],
            x: function() {
                return randomIntFromInterval(-50, 50);
            },
            y: function() {
                return randomIntFromInterval(-50, 50);
            }
        }
    });

TweenMax.to(container, 0.3, {
        autoAlpha: 1
    });
};

编译

CSS

HTML

<filter id="filter">
                <feColorMatrix type="matrix" values="0   0   0   0   0
											0   1   0   0   0
											0   1   0   0   0
											0   0   0   1   0 " />
            </filter>

</svg>
</div>

SVG Grid Mask With Color effect

svg, mask, image, effect

编辑器支持Emmet

快捷键

SVG Grid Mask With Color effect

svg, mask, image, effect

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用SVG和CSS3 mask特性实现的文本内视频遮罩特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：