html顶部飘落,html5飘落碎纸屑动画特效

特效描述：html5飘落 碎纸屑动画特效。飘落纸屑动画

代码结构

1. 引入JS

2. HTML代码

// Create confetti

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

var wrapper = document.createElement('section')

wrapper.id = 'confetti'

document.body.appendChild(wrapper)

for (var i = 60; i--;) {

var tag = document.createElement('div')

tag.setAttribute('data-top', Math.ceil(Math.random() * wrapper.offsetHeight * 2) - wrapper.offsetHeight)

tag.setAttribute('data-left', Math.ceil(Math.random() * wrapper.offsetWidth * 2) - wrapper.offsetWidth)

tag.setAttribute('data-bg', Math.ceil(Math.random() * 360))

tag.setAttribute('data-distance', Math.ceil(Math.random() * 100))

tag.setAttribute('data-x', Math.ceil(Math.random() * 360))

tag.setAttribute('data-y', Math.ceil(Math.random() * 360))

tag.setAttribute('data-z', Math.ceil(Math.random() * 360))

wrapper.appendChild(tag)

}

requestAnimationFrame(loop)

})

function loop() {

var tag = document.querySelectorAll('#confetti div')

for (var i = 0; i < tag.length; i++) {

var top = parseFloat(tag[i].getAttribute('data-top'))

var left = parseFloat(tag[i].getAttribute('data-left'))

var distance = parseFloat(tag[i].getAttribute('data-distance'))

var x = parseFloat(tag[i].getAttribute('data-x'))

var y = parseFloat(tag[i].getAttribute('data-y'))

var z = parseFloat(tag[i].getAttribute('data-z'))

tag[i].setAttribute('data-top', top + 1)

tag[i].setAttribute('data-left', left + 1)

tag[i].setAttribute('data-x', x + 2)

tag[i].setAttribute('data-y', y + 2)

tag[i].setAttribute('data-z', z + 2)

}

EQCSS.apply()

requestAnimationFrame(loop)

}