<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雪花飘落3D动画特效</title>
<script src="js/jquery-1.9.1.js"></script>
<script src="js2/jquery.textillate.js"></script>
<style type="text/css">
body {
background-color:#000044;
background:url(images/xh2.jpg);
background-repeat: no-repeat;
background-size: 100%;
margin:0px;
overflow:hidden;
}
a {
color:#0078ff;
}
</style>
</head>
<body onLoad="init()">
<img src="images/相知.png" alt="" style="position: absolute;left: 75%;top: 1%"/>
<script type="text/javascript" src="js2/ThreeCanvas.js"></script>
<script type="text/javascript" src="js2/Snow.js"></script>
<script type="text/javascript">
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 = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var particles = [];
var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
particleImage.src = '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 );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
setInterval( loop, 2000 / 60 );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
for(var i = 0; i<particles.length; i++)
{
var particle = particles[i];
particle.updatePhysics();
with(particle.position)
{
if(y<-1000) y+=2000;
if(x>1000) x-=2000;
else if(x<-1000) x+=2000;
if(z>1000) z-=2000;
else if(z<-1000) z+=2000;
}
}
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 );
}
</script>
<script type="text/javascript">
/*120*270，创建于2011-4-16*/
var cpro_id = "u448656";
</script>
<!-- 文本内容 -->
<h1 class="tlt" data-in-effect="rollIn">Title Title Title Title Title Title Title Title Title Title Title Title </h1>
<script type="text/javascript">
document.onload=function(){
$(function () {
$('.tlt').textillate();
})
}
</script>
</body>
</html>
html下雪特效并带有特殊文字效果
需积分: 9 25 浏览量
2016-11-21
17:49:56
上传
评论 1
收藏 391KB ZIP 举报
snow.zip （13个子文件） 
snow 
2.jpg 431KB js2 
animate.css 60KB ThreeCanvas.js 70KB jquery.lettering.js 2KB jquery.textillate.js 8KB Snow.js 1KB
snow.html 5KB js2 animate.css 60KB ThreeCanvas.js 70KB jquery.lettering.js 2KB jquery.textillate.js 8KB Snow.js 1KB snow.html 5KB资源评论
