html全屏飘雪花特效,html5 飘雪花动画(增加背景音乐)

冬天到了，少不了这样的动画效果(领导让加圣诞背景音乐)

效果查看地址：

1、PC端：https://www.huijindaicn.com/i...

{$title}

body {

/*background:url(images/bg.jpg) center no-repeat;*/

margin:0px;

}*

image{ width:100%; }

canvas{ position: fixed; top:0; }

/* 背景音乐开关按钮 */

.music{

width:50px;height:50px;

background:url(/cghd/201612/images/close.png) no-repeat;

background-color: #b91b10;

position: fixed;

top:30%;

right:10px;

cursor: pointer;

border-radius: 25px;

z-index: 9999;

}

.music:hover{

background-color: #b91b10;

}

var SCREEN_WIDTH = window.innerWidth;

var SCREEN_HEIGHT = window.innerHeight;

var container;

var particle;

var camera;

var scene;

var renderer;

var mouseX = 0;

var mouseY = 0;

var windowHalfX = SCREEN_WIDTH / 2;

var windowHalfY = SCREEN_HEIGHT / 2;

var particles = [];

var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );

particleImage.src = '/cghd/201612/images/ParticleSmoke.png';

function init() {

container = document.createElement('div');

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );

camera.position.z = 1000;

scene = new THREE.Scene();

scene.add(camera);

renderer = new THREE.CanvasRenderer();

renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

for (var i = 0; i < 500; i++) {

particle = new Particle3D( material);

particle.position.x = Math.random() * 2000 - 1000;

particle.position.y = Math.random() * 2000 - 1000;

particle.position.z = Math.random() * 2000 - 1000;

particle.scale.x = particle.scale.y = 1;

scene.add( particle );

particles.push(particle);

}

container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

setInterval( loop, 1000 / 60 );

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

mouseY = event.clientY - windowHalfY;

}

function loop() {

for(var i = 0; i

{

var particle = particles[i];

particle.updatePhysics();

with(particle.position)

{

if(y

if(x>1000) x-=2000;

else if(x

if(z>1000) z-=2000;

else if(z

}

}

camera.position.x += ( mouseX - camera.position.x ) * 0.05;

camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

camera.lookAt(scene.position);

renderer.render( scene, camera );

}

window.onload = init;

/*背景音乐开关控制*/

$('.music').on({

'click':function(){

var flag = $(this).attr('data-flag');

if(flag == 'open'){

audio.pause();

$(this).attr('data-flag','close');

$(this).css('background','url(/cghd/201612/images/open.png)');

$(this).css('background-color','#31628d');

}else{

audio.play();

$(this).attr('data-flag','open');

$(this).css('background','url(/cghd/201612/images/close.png)');

$(this).css('background-color','#b91b10');

}

},

});

2、WAP端：https://www.huijindaicn.com/w...

注意：在wap端，canvas 元素在页面最上层，遮挡了页面下层所有元素，导致无法选中页面下层的元素，所以另外加了触摸事件，其他与PC端相同

为页面添加触摸事件，使 canvas 元素 在用户触摸屏幕时排在页面元素的最底层，代码如下：

var canvas = document.getElementsByTagName('canvas');

document.addEventListener('touchstart', function(){

canvas[0].setAttribute("style","z-index:-1");

}, false);

document.addEventListener('touchmove', function(){

canvas[0].setAttribute("style","z-index:-1");

}, false);

document.addEventListener('touchend', function(){

canvas[0].removeAttribute("style");

}, false);