本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

博客下雪特效

12月,圣诞节也快到了,为了应景,给自己博客加上了下雪特效,虽然小白,但倒腾半天还是完成了,之前看了一个博主的教程,本来是可以直接以typecho插件的形式完成的,然鹅...原博主的插件下载不下来了(博客打不开,貌似挂了?),因此把添加教程放上来,顺便自己也做个记录。

1.首先下载这个必要的文件包

点我下载

2.解压压缩包

里面有2个文件,首先将three.js和snow.png放到网站合适的位置(无所谓放哪里,我们只是要能够获取到这2个文件的链接就可以)

3.修改模版文件

这里我们要修改foot.php,首先打开它,在body之间先引入three.js(注意修改JS文件路径)

<script type="text/javascript" src="你three.js文件的位置"></script>

再在后面加入以下内容(下面的代码会用到snow.png,我在后面打备注了,自己记得修改下snow.png的位置)

<script type="text/javascript">
function randomRange(t, i) {
return Math.random() * (i - t) + t
}
Particle3D = function(t) {
THREE.Particle.call(this, t),
this.velocity = new THREE.Vector3(0, -2, 0),
this.velocity.rotateX(randomRange( - 45, 45)),
this.velocity.rotateY(randomRange(0, 360)),
this.gravity = new THREE.Vector3(0, 0, 0),
this.drag = 1
},
Particle3D.prototype = new THREE.Particle,
Particle3D.prototype.constructor = Particle3D,
Particle3D.prototype.updatePhysics = function() {
this.velocity.multiplyScalar(this.drag),
this.velocity.addSelf(this.gravity),
this.position.addSelf(this.velocity)
};
var TO_RADIANS = Math.PI / 180;
THREE.Vector3.prototype.rotateY = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.x;
this.x = o * cosRY + i * sinRY,
this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateX = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.y;
this.y = o * cosRY + i * sinRY,
this.z = o * -sinRY + i * cosRY
},
THREE.Vector3.prototype.rotateZ = function(t) {
cosRY = Math.cos(t * TO_RADIANS),
sinRY = Math.sin(t * TO_RADIANS);
var i = this.x,
o = this.y;
this.y = o * cosRY + i * sinRY,
this.x = o * -sinRY + i * cosRY
};
$(function() {
var container = document.querySelector(".snow-container");
if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
    return
} else {
    if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
        $(container).css("height", $(window).height())
    }
}
var containerWidth = $(container).width();
var containerHeight = $(container).height();
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();
particleImage.src = "你snow.png的路径";  //这里改为你自己的snow.png图
片位置
var snowNum=500;
function init(){
camera=new THREE.PerspectiveCamera(75,containerWidth/containerHeight,1,10000);
camera.position.z=1000;
scene=new THREE.Scene();
scene.add(camera);
renderer=new THREE.CanvasRenderer();
renderer.setSize(containerWidth,containerHeight);
var material=new THREE.ParticleBasicMaterial({map:new THREE.Texture(particleImage)});
for(var i=0;i<snowNum;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/40);
}
function onDocumentMouseMove(event){
mouseX=event.clientX-windowHalfX;
mouseY=event.clientY-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.005;
camera.position.y+=(-mouseY-camera.position.y)*0.005;
camera.lookAt(scene.position);
renderer.render(scene,camera)
}
init()
});  
</script>

4.再在body中加入一个div(接在上面的代码后面就可以)

<div class="snow-container"></div>

5.修改模版CSS

编辑主题的style.css文件,添加如下代码:

.snow-container{
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  z-index: 100001;
}  

6.保存刷新即可。

最后声明一下,博主只是将之前博主的代码文件整理了一下,方便其他朋友可以直接使用,代码的版权仍归原作者所有

雪花特效来源于@jQuery之家

原优化修改后的代码来自@猫与向日葵


 继续浏览关于 的文章

 本文最后更新于:2019/09/21 17:16:29,可能因经年累月而与现状有所差异

 引用转载请注明:桃先森 > 默认分类 > 博客下雪特效

精选评论

  1. 知道91博客
    知道91博客 回复

    Windows 10Chrome 62.0.3202.94

    不错啊,这个可以啊,必须顶啊

  2. 折影轻梦
    折影轻梦 回复

    Windows 7Chrome 62.0.3202.94

    2018新年快乐!!!

  3. 耐火砖
    耐火砖 回复

    Windows 7Firefox 57.0

    外面在下大雪,你的博客也在下雪 @(kuanghan)

    1. 桃先森

      是的是的,哈哈哈 @(xiaoyan)

  4. 胡家小子
    胡家小子 回复

    Windows 10Chrome 63.0.3239.108

    记得去年还弄过 恭喜发财的特效 博客全红 感觉雪花太多了 适当少点更好

  5. 芭比
    芭比 回复

    Mac OS X 10_13_6Chrome 67.0.3396.99

    这个下雪对电脑配置不高的人  会不会卡呢

  6. 分板机
    分板机 回复

    Windows 7Chrome 63.0.3239.132

    好长的代码

  7. cess
    cess 回复

    Windows 7Chrome 63.0.3239.132

    哇,这个棒。666

  8. 精斑检测试纸
    精斑检测试纸 回复

    Windows 7Chrome 63.0.3239.132

    以前很爱特效

  9. 撩人的无眠兔
    撩人的无眠兔 回复

    Windows 7Chrome 70.0.3538.110

    你好 我这个foot.php文件找不到  这个怎么办呀 是需要自己新建一个吗?