html 视差效果,html5网页3D视差效果代码

特效描述：html5网页 3D视差效果。html5网页3D视差效果代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

var ww,wh;

function init(){

t = 0;

ww = window.innerWidth;

wh = window.innerHeight;

container = Sprite3D.stage().appendChild(Sprite3D.box( 0, 0, 0, "cube" ));

bg1 = container.appendChild(Sprite3D.create("bg1").size(ww,wh).y(-wh/2).x(-ww/2).z(0).update());

bg2 = container.appendChild(Sprite3D.create("bg2").size(ww/1.2,ww/12.17).y(wh/2-ww/11).x(-ww/2.4).z(60).update());

cage = container.appendChild(Sprite3D.create("cage").size(617,679).y(-309).x(-340).z(30).update());

man = container.appendChild(Sprite3D.create("man").size(617,679).y(-309).x(-340).z(80).update());

bird1 = container.appendChild(Sprite3D.create("bird1").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());

bird2 = container.appendChild(Sprite3D.create("bird2").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());

bird3 = container.appendChild(Sprite3D.create("bird3").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).update());

bird4 = container.appendChild(Sprite3D.create("bird4").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());

bird5 = container.appendChild(Sprite3D.create("bird5").size(617,679).y(-309).x(-330).z(80).transformOrigin(157,395).rotationX(30).update());

bird6 = container.appendChild(Sprite3D.create("bird6").size(617,679).y(-309).x(-330).z(80).transformOrigin(414,368).update());

bird7 = container.appendChild(Sprite3D.create("bird7").size(617,679).y(-309).x(-330).z(80).transformOrigin(417,374).update());

bird8 = container.appendChild(Sprite3D.create("bird8").size(617,679).y(-309).x(-330).z(80).transformOrigin(419,372).update());

bird9 = container.appendChild(Sprite3D.create("bird9").size(617,679).y(-309).x(-340).z(80).transformOrigin(425,374).update());

var x,y,z,w;

$("body").mousemove(function move(e){

x = e.clientX;

y = e.clientY;

//En haut à gauche

if(x

x = Math.abs(x-ww/2);

container.rotationY(-x/90).update();

}

if(x>ww/2){

x = x-ww/2;

container.rotationY(x/90).update();

}

if(y

y = Math.abs(y-wh/2);

container.rotationX(y/80).update();

}

if(y>wh/2){

y = y-wh/2;

container.rotationX(-y/80).update();

}

});

var i =0;

test = setInterval(function(){

i+=.02;

bird1.rotationX(Math.cos(i)).update();

bird2.rotationX(-Math.cos(i/.59)*2.168).update();

bird3.rotationZ(-Math.cos(i/.83)).rotationX(-Math.cos(i/.59)).update();

bird4.rotationX(-Math.cos(i/.35)*1.988).rotationY(Math.cos(i/.83)*20).update();

bird5.rotationX(-Math.cos(i/.35)*4.988-30).rotationZ(-Math.cos(i/.59)*5.596).update();

bird6.rotationY(-Math.cos(i/.5)*10).rotationZ(-Math.cos(i/.59)*5.596).update();

bird7.rotationX(-Math.cos(i/.8)*7).update();

bird8.rotationZ(-Math.cos(i/2)*3).update();

bird9.rotationY(Math.cos(i/.9)*3).rotationX(-Math.cos(i/7)*4).rotationZ(-Math.cos(i/8)*3).update();

}, 20);

}

init();

window.onresize = function(){

ww = window.innerWidth;

wh = window.innerHeight;

$("body").empty();

init();

};