简单实现wordpess博客花瓣飘落特效

作者:小鱼干 发布时间: 2020-06-20 文章热度: 48 本文共7611个字,预计阅读时间需要20分钟。

简单实现wordpess博客花瓣飘落特效调用版,代码全部集成,只需调用一个js文件即可,无需其它代码,代码来自鸟叔博客,修改了一下调用。

简单实现wordpess博客花瓣飘落特效插图

使用:直接把下面代码丢到主题页脚文件(footer.php)即可,默认使用我的外链,怕不稳的请下载完整源代码自建。

PS:图片还是使用鸟叔的外链!

调用代码:

<script src="https://www.seovx.com/seovx/sno.js"></script>

完整源代码:

/** 梅花翻转动画 **/
.snowfall-flakes {
	pointer-events: none;
	animation: sakura 1s linear 0s infinite;
}
 
.snowfall-flakes {
	animation: sakura 1s linear 0s infinite;
}
 
.night .snowfall-flakes {
	background: transparent !important;
}
 
@keyframes sakura {
	0% {
		transform: rotate3d(0, 0, 0, 0deg);
	}
 
	25% {
		transform: rotate3d(1, 1, 0, 60deg);
	}
 
	50% {
		transform: rotate3d(1, 1, 0, 0deg);
	}
 
	75% {
		transform: rotate3d(1, 0, 0, 60deg);
	}
 
	100% {
		transform: rotate3d(1, 0, 0, 0deg);
	}
}
if(!Date.now){Date.now=function(){return new Date().getTime()}}(function(){var vendors=["webkit","moz"];for(var i=0;i<vendors.length&&!window.requestAnimationFrame;++i){var vp=vendors[i];window.requestAnimationFrame=window[vp+"RequestAnimationFrame"];window.cancelAnimationFrame=(window[vp+"CancelAnimationFrame"]||window[vp+"CancelRequestAnimationFrame"])}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var lastTime=0;window.requestAnimationFrame=function(callback){var now=Date.now();var nextTime=Math.max(lastTime+16,now);return setTimeout(function(){callback(lastTime=nextTime)},nextTime-now)};window.cancelAnimationFrame=clearTimeout}}());(function($){$.snowfall=function(element,options){var flakes=[],defaults={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:false,shadow:false,collection:false,collectionHeight:40,deviceorientation:false},options=$.extend(defaults,options),random=function random(min,max){return Math.round(min+Math.random()*(max-min))};$(element).data("snowfall",this);function Flake(_x,_y,_size,_speed){this.x=_x;this.y=_y;this.size=_size;this.speed=_speed;this.step=0;this.stepSize=random(1,10)/100;if(options.collection){this.target=canvasCollection[random(0,canvasCollection.length-1)]}var flakeMarkup=null;if(options.image){flakeMarkup=document.createElement("img");flakeMarkup.src=options.image}else{flakeMarkup=document.createElement("div");$(flakeMarkup).css({"background":options.flakeColor})}$(flakeMarkup).attr({"class":"snowfall-flakes",}).css({"width":this.size,"height":this.size,"position":options.flakePosition,"top":this.y,"left":this.x,"fontSize":0,"zIndex":options.flakeIndex});if($(element).get(0).tagName===$(document).get(0).tagName){$("body").append($(flakeMarkup));element=$("body")}else{$(element).append($(flakeMarkup))}this.element=flakeMarkup;this.update=function(){this.y+=this.speed;if(this.y>(elHeight)-(this.size+6)){this.reset()}this.element.style.top=this.y+"px";this.element.style.left=this.x+"px";this.step+=this.stepSize;if(doRatio===false){this.x+=Math.cos(this.step)}else{this.x+=(doRatio+Math.cos(this.step))}if(options.collection){if(this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var ctx=this.target.element.getContext("2d"),curX=this.x-this.target.x,curY=this.y-this.target.y,colData=this.target.colData;if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]!==undefined||curY+this.speed+this.size>this.target.height){if(curY+this.speed+this.size>this.target.height){while(curY+this.speed+this.size>this.target.height&&this.speed>0){this.speed*=0.5}ctx.fillStyle=defaults.flakeColor;if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]==undefined){colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]=1;ctx.fillRect(curX,(curY)+this.speed+this.size,this.size,this.size)}else{colData[parseInt(curX)][parseInt(curY+this.speed)]=1;ctx.fillRect(curX,curY+this.speed,this.size,this.size)}this.reset()}else{this.speed=1;this.stepSize=0;if(parseInt(curX)+1<this.target.width&&colData[parseInt(curX)+1][parseInt(curY)+1]==undefined){this.x++}else{if(parseInt(curX)-1>0&&colData[parseInt(curX)-1][parseInt(curY)+1]==undefined){this.x--}else{ctx.fillStyle=defaults.flakeColor;ctx.fillRect(curX,curY,this.size,this.size);colData[parseInt(curX)][parseInt(curY)]=1;this.reset()}}}}}}if(this.x+this.size>(elWidth)-widthOffset||this.x<widthOffset){this.reset()}};this.reset=function(){this.y=0;this.x=random(widthOffset,elWidth-widthOffset);this.stepSize=random(1,10)/100;this.size=random((options.minSize*100),(options.maxSize*100))/100;this.element.style.width=this.size+"px";this.element.style.height=this.size+"px";this.speed=random(options.minSpeed,options.maxSpeed)}}var i=0,elHeight=$(element).height(),elWidth=$(element).width(),widthOffset=0,snowTimeout=0;if(options.collection!==false){var testElem=document.createElement("canvas");if(!!(testElem.getContext&&testElem.getContext("2d"))){var canvasCollection=[],elements=$(options.collection),collectionHeight=options.collectionHeight;for(var i=0;i<elements.length;i++){var bounds=elements[i].getBoundingClientRect(),$canvas=$("<canvas/>",{"class":"snowfall-canvas"}),collisionData=[];if(bounds.top-collectionHeight>0){$("body").append($canvas);$canvas.css({"position":options.flakePosition,"left":bounds.left+"px","top":bounds.top-collectionHeight+"px"}).prop({width:bounds.width,height:collectionHeight});for(var w=0;w<bounds.width;w++){collisionData[w]=[]}canvasCollection.push({element:$canvas.get(0),x:bounds.left,y:bounds.top-collectionHeight,width:bounds.width,height:collectionHeight,colData:collisionData})}}}else{options.collection=false}}if($(element).get(0).tagName===$(document).get(0).tagName){widthOffset=25}$(window).bind("resize",function(){elHeight=$(element)[0].clientHeight;elWidth=$(element)[0].offsetWidth});
for(i=0;i<options.flakeCount;i+=1){flakes.push(new Flake(random(widthOffset,elWidth-widthOffset),random(0,elHeight),random((options.minSize*100),(options.maxSize*100))/100,random(options.minSpeed,options.maxSpeed)))}if(options.round){$(".snowfall-flakes").css({"-moz-border-radius":options.maxSize,"-webkit-border-radius":options.maxSize,"border-radius":options.maxSize})}if(options.shadow){$(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"})}var doRatio=false;if(options.deviceorientation){$(window).bind("deviceorientation",function(event){doRatio=event.originalEvent.gamma*0.1})}function snow(){for(i=0;i<flakes.length;i+=1){flakes[i].update()}snowTimeout=requestAnimationFrame(function(){snow()})}snow();this.clear=function(){$(".snowfall-canvas").remove();$(element).children(".snowfall-flakes").remove();cancelAnimationFrame(snowTimeout)}};$.fn.snowfall=function(options){if(typeof(options)=="object"||options==undefined){return this.each(function(i){(new $.snowfall(this,options))})}else{if(typeof(options)=="string"){return this.each(function(i){var snow=$(this).data("snowfall");if(snow){snow.clear()}})}}}})(jQuery);

$(document).ready(function(){
	$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlaVK.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FltDx.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlNb6.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
	$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlYK1.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});
});
//ÒýÈëcss
new_element=document.createElement("link");
new_element.setAttribute("rel","stylesheet");
new_element.setAttribute("type","text/css");
new_element.setAttribute("href","/seovx/sno.css");
document.body.appendChild(new_element);

/* 
	²ÎÊý˵Ã÷£º
	image      PNGͼƬµØÖ·
	flakeCount ÊýÁ¿
	minSpeed   ËÙ¶È
	minSize    ×îС³ß´ç
	maxSize    ×î´ó³ß´ç
 */

 

免责声明

0、网站资源均通过网络等合法渠道获取,该资料仅作为学习交流,其版权归出版社或者原作者所有,本网站不对所涉及的版权问题负责。网站售卖的价格绝对不是商品价格,而是整理资料的成本,如原作者认为侵权,请联系我们,我们立即删除文章,谢谢!
本站保证原原本本的完整性下载原始文件,并不保证资料的准确性,可靠性,对此产生的问题不做任何解释

1、博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

2、网站资源均通过网络等合法渠道获取,该资料仅作为学习交流,其版权归出版社或者原作者所有,下载后请于24小时内删除,如有真实需要请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!本网站不对所涉及的版权问题负责。网站售卖的价格绝对不是商品价格,而是整理资料的成本。

3、如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主,并参照 侵删联系 的说明提交相应的证明材料,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

4、博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

5、博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

6、博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

7、另外还有部分家里有矿的用户就希望我帮他服务,对于这种有钱人变态的需求,我一般都不会拒绝的。

8、本站虚拟货币充值或数字资源购买后,均不可以任何理由退换!购买前(请慎重考虑)

9、附注:根据二○○二年一月一日《计算机软件保护条例》规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。

10、数字千年版权法案(DMCA)
琼鲸网网站接受受版权保护的内容DMCA侵权通知。


琼鲸网络 » 简单实现wordpess博客花瓣飘落特效

常见问题FAQ

免费下载或者SVIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 SVIP介绍。
充值&SVIP会员需知

SVIP会员请遵守以下规则:

1.凡是来转载倒卖资源的会员请不要加入SVIP否则你会得不偿失!一经查出不退余额!
2.SVIP会员仅限注册人一人使用,若本站发现共享SVIP会员行为,将立即停用对应账号的SVIP会员权限。。
3.SVIP会员和充值属于虚拟服务,付款后不能够申请退款。如付钱前有任何疑问,联系站长处理
4.SVIP资源仅限SVIP会员下载学习使用,不能够通过其他网站分享资源,若本站发现分享SVIP资源到其他网站,将立即停用对应账号的SVIP会员权限。

问:免费下载或者SVIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

问:购买了SVIP会员服务后,能否申请退款?
在购买SVIP会员前,请阁下充分考虑清楚。一旦成功开通SVIP会员资格后,均不能以任何理由申请退款,请知悉。

问:为什么付款了未开通SVIP会员?
我们已经与支付宝和微信实现了支付对接,付款未能正常开通SVIP会员,可能是由于支付数据回传失败导致。若您已经确定支付但未开通SVIP,点击这里,提交人工审核开通SVIP会员。

问:SVIP会员剩余时间查询?
您可以登录琼鲸网络网站,访问会员中心查看SVIP到期时间。

问:网站货币充值后是否可退?
网站货币是虚拟货币只能在本站使用购买SVIP或资源,一旦充值均不能以任何理由申请退款,(请慎重充值)

问:购买资源是否可退换?
数字资源具有可复制黏贴功能一旦购买均不能以任何理由申请退换(购买前请慎重考虑)

提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
网站所有素材99%都是采用百度网盘、天翼云盘、蓝奏云网盘存储
购买前请确定您可以正常打开所采用的网盘链接(如百度网盘)再进行充值!如因区域限制或自身软硬件设备等原因而打不开或下载不了,本站概不负责。百度云的速度,请自行测试,由于不可控的原因,本站不对百度云产生的下载慢做任何解释。总之不能使用百度网盘的地区,请自己想办法解决!。

发表评论

300+

用户总数

760+

资源总数

0+

24小时内更新

2020年6月20日

最后更新时间