WordPress美化——添加花瓣飘落特效

分享一个花瓣飘落的特效,可以加到自己网站上点缀一下氛围。

WordPress美化——添加花瓣飘落特效
第一步、添加代码

在WordPress主题页脚模板footer.php文件中加入以下代码:

<!-- 梅花树枝,可以删除 -->
<div class="meiha"></div>
<!-- 配套样式,可以替换其中的图片地址 -->
<!-- 加载snowfall.js -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/snowfall.js"></script>

第二步、添加样式

然后在主题样式文件style.css中加入以下代码:

/* 梅花树样式 */
.meiha {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
	width: 350px;/** PNG图宽度 **/
	height: 231px;/** PNG图高度 **/
	pointer-events: none;
	background: url('https://s2.ax1x.com/2020/01/21/1kBpid.png');
}
/* 梅花树样式结束 */
 
/* 梅花翻转动画样式 */
.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);
	}
}
/* 梅花翻转动画样式结束 */

第三步、添加JavaScript

在主题根目录下创建一个snowfall.js文件并将以下代码复制进去:

/* 
	参数说明:
	image      PNG图片地址
	flakeCount 数量
	minSpeed   速度
	minSize    最小尺寸
	maxSize    最大尺寸
 */
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,});
});

根据需要可以自行修改,最后清空浏览器缓存刷新页面即可。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服:1377177670@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载或失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有米币奖励和额外收入!

哈米酷 其他美化 WordPress美化——添加花瓣飘落特效 https://www.hmkoo.com/696.html

互联网优质源码素材教程共享下载平台

常见问题
  • 本站除独家和商用资源外的所有资源版权均属于原作者所有,这些资源均只能用于参考学习使用,请于下载后的24个小时之内,从您的电脑中彻底删除上述内容资源,切勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完的压缩包与网盘上的容量,若小于网盘提示的容量则是不完整的原因。这是浏览器下载的bug,建议用百度网盘。
查看详情

相关文章

评论
暂无评论
WordPress美化——添加花瓣飘落特效-海报

分享本文封面