原生JS実現画像爆発特効
3741 ワード
オリジナルJSで実現した画像の爆発効果を共有すると、次のようになります.
実装コードは以下の通りです.
実装コードは以下の通りです.
JS
var index = 0;
var zIndex = 9999999;
//
var arr = ['images/0.jpg', 'images/1.jpg', 'images/2.jpg'];
var imgIndex = 0;
function random(min, max) {
return parseInt(min + Math.random() * (max - min));
}
show(10, 8);
function show(x, y) {
var R = x;
var T = y;
//
var oDiv2 = document.createElement('div');
oDiv2.id = 'l' + index;
oDiv2.style.zIndex = zIndex;
//
zIndex--;
index++;
// ，
if (imgIndex == arr.length) {
imgIndex = 0
};
boom_node.appendChild(oDiv2);
//
for (var i = 0; i < T; i++) {
for (var j = 0; j < R; j++) {
var oDiv = document.createElement('div');
//
oDiv.style.width = boom_node.offsetWidth / R + 'px';
oDiv.style.height = boom_node.offsetHeight / T + 'px';
// div
oDiv.style.float = 'left';
//
oDiv.style.background = 'url(' + arr[imgIndex] + ')';
oDiv.style.backgroundPositionX = -j * (boom_node.offsetWidth / R) + 'px';
oDiv.style.backgroundPositionY = -i * (boom_node.offsetHeight / T) + 'px';
//
oDiv.style.transition = (1.3 + Math.random() * 0.5) + 's all ease ' +
(0.1 + Math.random() * 0.16) + 's';
document.getElementById('l' + (index - 1)).appendChild(oDiv);
}
};
//
imgIndex++;
//2
setTimeout(function () {
var allDiv = document.getElementById('l' + (index - 1)).children;
for (var i = 0; i < allDiv.length; i++) {
//
allDiv[i].style.transform = 'perspective(800px) rotateX(' + random(-190, 191) + 'deg) rotateY(' + random(-190, 191) + 'deg) scale(' + (1.5 + Math.random() * 0.6) + ') translateX(' + random(-300, 301) + 'px) translateY(' + random(-300, 301) + 'px) rotate(' + random(-190, 191) + 'deg)';
//
allDiv[i].style.opacity = 0;
};
// ,
show(x, y);
// div
setTimeout(function () {
// ID 'l+(index+0)', 'l+(index+1)', 'l+(index+2)'
boom_node.removeChild(document.getElementById('l' + (index - 2)))
}, 1800);
}, 2000);
}