这星期宁波有些地方已经开始下雪了,气温一下子降了很多,又快过年了。冬天最喜欢的就是下雪了,我想没有几个人不喜欢的,所以就从网络上到处收集有关雪花的特效,今天就来分享第一个JS雪花特效。这是个从淘宝网上拿下来的下雪特效,雪花从页面的顶部一直往下飘落,当你向下滚动页面时雪花又从当前页面的顶部开始下,而不是一直是从页面顶部落下来的。
js雪花特效代码
(function(){
function k(a,b,c){
if(a.addEventListener)
a.addEventListener(b,c,false);
else {
a.attachEvent&&a.attachEvent("on"+b,c)
}
}
function g(a){
if(typeof window.onload!="function"){
window.onload=a;
}else{
var b=window.onload;
window.onload=function(){
b();
a()
}
}
}
function h(){
var a={};
for(type in{Top:"",Left:""}){
var b=type=="Top"?"Y":"X";
if(typeof window["page"+b+"Offset"]!="undefined")
a[type.toLowerCase()]=window["page"+b+"Offset"];
else{
b=document.documentElement.clientHeight?document.documentElement:document.body;
a[type.toLowerCase()]=b["scroll"+type]
}
}
return a
}
function l(){
var a=document.body,b;
if(window.innerHeight)
b=window.innerHeight;
else if(a.parentElement.clientHeight)
b=a.parentElement.clientHeight;
else if(a&&a.clientHeight)
b=a.clientHeight;
return b
}
function i(a){
this.parent=document.body;
this.createEl(this.parent,a);
this.size=Math.random()*5+3;
this.el.style.width=Math.round(this.size)+"px";
this.el.style.height=Math.round(this.size)+"px";
this.maxLeft=document.body.offsetWidth-this.size;
this.maxTop=document.body.offsetHeight- this.size;
this.left=Math.random()*this.maxLeft;
this.top=h().top+1;
this.angle=1.4+0.2*Math.random();
this.minAngle=1.4;
this.maxAngle=1.6;
this.angleDelta=0.01*Math.random();
this.speed=2+Math.random()
}
var j=false;
g(function(){
j=true
});
var f=true;
window.createSnow=function(a,b){
if(j){
var c=[],m=setInterval(function(){
f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
!f&&!c.length&&clearInterval(m);
for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)
if(c[d])
if(c[d].top<e||c[d].top+c[d].size+1>e+n){
c[d].remove();
c[d]=null;
c.splice(d,1)
}else{
c[d].move();
c[d].draw()
}
},40);
k(window,"scroll",function(){
for(var e=c.length-1;e>=0;e--)
c[e].draw()
})
}else
g(function(){
createSnow(a,b)
})
};
window.removeSnow=function(){
f=false
};
i.prototype={
createEl:function(a,b){
this.el=document.createElement("img");
this.el.setAttribute("src","now.gif");
//this.el.setAttribute("class","fixpng");
this.el.style.position="absolute";
this.el.style.display="block";
this.el.style.zIndex="99";
//document.getElementById('snow').appendChild(this.el);
this.parent.appendChild(this.el)
},
move:function(){
if(this.angle< this.minAngle||this.angle>this.maxAngle)
this.angleDelta=-this.angleDelta;
this.angle+=this.angleDelta;
this.left+=this.speed*Math.cos(this.angle*Math.PI);
this.top-=this.speed*Math.sin(this.angle*Math.PI);
if(this.left<0)
this.left=this.maxLeft;
else if(this.left>this.maxLeft)
this.left=0
},
draw:function(){
this.el.style.top=Math.round(this.top)+"px";
this.el.style.left=Math.round(this.left)+"px"
},
remove:function(){
//document.getElementById('snow').removeChild(this.el);
//document.getElementById('snow').this.el=null;
this.parent.removeChild(this.el);
this.parent=this.el=null
}
}
})();
/**
* This function takes 2 arguments
* First is the path to the directory with snowflake images
* Second is the maximum number of snowflakes, please do not
* set this number above 60 as it will impact the performance
*/
createSnow('', 60);
直接复制上面的js代码就可以查看到效果,如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/
分享到:
相关推荐
接着,我们需要在`<script>`标签中引入或者创建一个名为`snowfall.js`的JS文件,这个文件将包含实现下雪特效的所有逻辑。以下是一个简单的例子: ```javascript // 获取canvas元素 const canvas = document....
总的来说,CSS雪花特效是一个结合了CSS动画、伪元素和可能的JavaScript交互的复杂但有趣的项目。它展示了前端开发中创造性的一面,同时也需要对CSS的掌握有较深的理解。通过不断调整和优化,你可以创造出一个既美观...
JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS实现雪花下落特效JS...
在本案例中,"js雪花特效"是一个利用JavaScript实现的视觉效果,尤其适用于圣诞节、平安夜或冬季主题的网站背景,为用户带来独特的交互体验。通过这种特效,网站的访问者可以看到屏幕上飘落的雪花,营造出一种冬日...
我们需要创建一个窗体(Form),作为下雪特效的显示区域,并添加一个Paint事件处理程序来绘制雪花。 在Paint事件处理程序中,我们可以利用Graphics类来绘制雪花。Graphics类提供了多种绘制图形的方法,如DrawLine、...
6. **js**:JavaScript代码通常放在这里,负责实现动态雪花飘落的逻辑,包括雪花的生成、运动轨迹、碰撞检测等。 学习这个特效,你需要理解HTML5的结构标签,CSS3的选择器、过渡和动画属性,以及JavaScript的基本...
同时,three.js的动画系统可以控制这些雪花在指定时间内改变位置和旋转角度,以营造出下雪的感觉。 为了实现这个3D效果,开发者需要在HTML中创建一个canvas元素,作为three.js的画布。在index.html中,可能包含了...
"漫天雪花动画特效"是Canvas应用的一个经典案例,它利用了Canvas API来模拟真实世界中雪花飘落的效果,为网页增添了一份冬季的浪漫气息。 首先,我们来理解HTML5 Canvas的基本概念。Canvas是一个二维绘图上下文,...
"下雪js特效源码"就是一个典型的例子,它允许开发者在网页上创建逼真的下雪动画,为用户营造出一种浪漫且节日氛围浓厚的环境,比如圣诞节。这种特效源码通常基于JavaScript语言,这是一种广泛应用于前端开发的编程...
这里只有一个`<div>`元素,作为雪花飘舞的容器,它的类名是`snow_parent`,并且设置了`id`为`js_snow`,方便通过JavaScript进行操作。这个容器具有相对定位,以便于子元素相对于它进行绝对定位。 CSS部分定义了雪花...
本教程将带你走进JavaScript初学者特效的殿堂,以“网页雪花特效”为例,教你如何利用JS、CSS3和HTML5创建一个可自定义的动态雪花效果。在这个过程中,你不仅能学到基本的JavaScript编程技巧,还能了解到CSS3动画和...
在本项目中,开发者利用了ArcGIS JavaScript API和Three.js库来实现一个逼真的下雪特效。这个技术结合了地理信息系统(GIS)与WebGL图形渲染技术,为地图应用增添了生动的视觉效果。以下是关于这些知识点的详细说明...
在本项目中,"flake_331_jsjq雪花_"是一个关于使用JavaScript和jQuery实现雪花纷飞特效的实例。这个特效常用于冬季主题的网页设计,为用户带来一种浪漫和节日的氛围。以下是对这个项目的详细解读: 1. **JavaScript...
在这个"js-canvas雪花特效插件及demo"中,我们可以深入探讨Canvas API的运用以及雪花特效的实现原理。 首先,让我们了解一下Canvas API的基础知识。Canvas提供了一系列的绘图方法,如`fillRect()`, `strokeRect()`,...
在IT行业中,编程特效的实现往往能够提升用户体验,其中“雪花效果”就是一个常见的视觉美化元素。本主题聚焦于使用Java语言实现的“雪花效果”,这是一个动态的图形渲染技术,能够模拟真实的雪花飘落场景,为用户...
在这个"HTML5 Canvas下雪雪花动画特效.zip"压缩包中,包含了六种不同的雪花动画实现,这些都是通过JavaScript利用Canvas API来创建的。下面我们将深入探讨HTML5 Canvas和这些特效的相关知识点。 1. **HTML5 Canvas...
在Unity中,特效是提升游戏或应用视觉表现力的重要手段,而“雪花特效”则是其中一种常见的自然环境模拟。 这款名为"Realistic Snow VFX 2.1.unitypackage"的资源包,专门用于在Unity项目中实现逼真的雪花效果。它...
雪花js特效和用于各种页面 ,我也是下载的自己学习学习