var monster1 = document.getElementById('monster1'), monster2 = document.getElementById('monster2'), monster3 = document.getElementById('monster3'), button_wrapper = document.getElementById('button_wrapper'), share = document.getElementById('share'); setTimeout(function() { monster2.classList.add('bounceIn') monster2.classList.add('animated') }, 200); setTimeout(function() { monster1.classList.add('bounceIn') monster1.classList.add('animated') }, 400); setTimeout(function() { monster3.classList.add('bounceIn') monster3.classList.add('animated') setTimeout(function() { monster1.classList.remove('bounceIn') monster1.classList.remove('animated') monster1.classList.add('visible') monster2.classList.remove('bounceIn') monster2.classList.remove('animated') monster2.classList.add('visible') monster3.classList.remove('bounceIn') monster3.classList.remove('animated') monster3.classList.add('visible') }, 1000) }, 800); setTimeout(function() { button_wrapper.classList.add('fadein') }, 1000); setTimeout(function() { share.classList.add('fadein') }, 1200); var mouseMoveInited = false function onMouseMove(e) { var x = e.clientX, y = e.clientY; monster1.style['transform'] = 'translateX(' + (e.clientX*0.03-50) + 'px) translateY(' + (-e.clientY*0.1) + 'px)'; monster2.style['transform'] = 'translateX(' + (50-e.clientX*0.05) + 'px) translateY(' + (20-e.clientY*0.05) + 'px)'; monster3.style['transform'] = 'translateX(' + (e.clientX*0.06-80) + 'px) translateY(' + (20-e.clientY*0.03) + 'px)'; } function check () { if (window.innerWidth > 1000) { if (mouseMoveInited) return false mouseMoveInited = true window.addEventListener('mousemove', onMouseMove); } else if (mouseMoveInited) { mouseMoveInited = false monster1.style['transform'] = ''; monster2.style['transform'] = ''; monster3.style['transform'] = ''; window.removeEventListener('mousemove', onMouseMove); } } window.addEventListener('resize', check) check()