基于snowfall的玫瑰花瓣飘落效果
玫瑰花瓣飘落效果
做专题时,常常需要添加一些动效,可以让我们的页面活起来
就像最近某电商网站一系列雪花飘落效果
看了网上封装的snowfall.js配置挺方便的,用起来也蛮好的
用法
1.首先引入jquery
2.再引入snowfall.js
3.开启雪花特效
$(document).snowfall();
4.配置参数
$(document).snowfall({flakeCount : 100, maxSpeed : 10});
image:"",//图片链接 flakeCount : 20,//数量 flakeColor : '#ffffff',颜色 minSize : 1,最小size maxSize : 2,最大size minSpeed : 1,最小速度 maxSpeed : 5,最大速度 round : false,是否圆润 shadow : false,是否阴影
清除雪花
$(‘#element’).snowfall(‘clear’);
如果要飘落几种不同的图片
可以多开启几种雪花特效:
$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f3.png",minSize: 28,maxSize: 70});$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f4.png",minSize: 28,maxSize: 50});
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="telephone=no" name="format-detection" /><title>title</title><link rel="stylesheet" type="text/css" href="http://q.qunarzz.com/resetcss/prd/1.0.2/reset.css"> </head> <body><script src='http://q.qunarzz.com/jquery/prd/jquery-1.7.2.js'></script><script>if (!Date.now)Date.now = function() { return new Date().getTime(); };(function() {'use strict';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) // iOS6 is buggy|| !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 : 20,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);// Snow flake objectfunction Flake(_x, _y, _size, _speed){// Flake propertiesthis.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;// Update function, used to update the snow flakes, and checks current snowflake against boundsthis.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));}// Pileup checkif(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 *= .5;}ctx.fillStyle = "#fff";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{// flow to the sidesthis.speed = 1;this.stepSize = 0;if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){// go leftthis.x++;}else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){// go rightthis.x--;}else{//stop ctx.fillStyle = "#fff";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();}}// Resets the snowflake once it reaches one of the bounds setthis.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);}}// local varsvar i = 0,elHeight = $(element).height(),elWidth = $(element).width(),widthOffset = 0,snowTimeout = 0;// Collection Piece ******************************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{// Canvas element isnt supported options.collection = false;}}// ************************************************// This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole pageif($(element).get(0).tagName === $(document).get(0).tagName){widthOffset = 25;}// Bind the window resize event so we can get the innerHeight again $(window).bind("resize", function(){elHeight = $(element)[0].clientHeight;elWidth = $(element)[0].offsetWidth;});// initialize the flakesfor(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)));}// This adds the style to make the snowflakes round via border radius propertyif(options.round){$('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});}// This adds shadows just below the snowflake so they pop a bit on lighter colored web pagesif(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'});}// On newer Macbooks Snowflakes will fall based on deviceorientationvar doRatio = false;if (options.deviceorientation) {$(window).bind('deviceorientation', function(event) {doRatio = event.originalEvent.gamma * 0.1;});}// this controls flow of the updating snowfunction snow(){for( i = 0; i < flakes.length; i += 1){flakes[i].update();}snowTimeout = requestAnimationFrame(function(){snow()});}snow();// clears the snowflakesthis.clear = function(){$('.snowfall-canvas').remove();$(element).children('.snowfall-flakes').remove();cancelAnimationFrame(snowTimeout);}};// Initialize the options and the plugin $.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);function flowerfall(){$(document).snowfall('clear');$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f1.png",minSize: 28,maxSize: 90});$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f2.png",minSize: 28,maxSize: 50});$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f3.png",minSize: 28,maxSize: 70});$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f4.png",minSize: 28,maxSize: 50});$(document).snowfall({image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f5.png",minSize: 28,maxSize: 90});}flowerfall();</script> </body> </html>
转载于:https://www.cnblogs.com/alisalixue/p/5147430.html
基于snowfall的玫瑰花瓣飘落效果相关推荐
- 安卓动态壁纸源码--可直接进入壁纸设置界面+玫瑰花瓣飘落效果+可分享到微博、微信功能--无任何删减2
1.宙斯之眼动态壁纸是作者向喜欢的女孩表白被拒绝后,在失眠的深夜所做.仅以此作送给自己喜欢的女孩,以及所有能够感同身受的人!同时也送给自己,定格那种难以言表的复杂心情. 2.可以设置动态切换壁纸 可 ...
- android 自定义View实现花瓣飘落效果
在偶然的一次看到别人的动画效果特别好就来实现一个花瓣飘落的效果, 原理就是不断变化坐标,不停的修改坐标值 package com.lzx.lock;import android.content.Con ...
- Unity3D 使用粒子组件实现花瓣飘落效果
可直接使用的花瓣飘落资源包
- java实现花瓣飘落效果
效果: 代码: package com.example.flowerdemo;/*** @author ZhaoXu* @date 2023/1/17 15:07*/import javax.imag ...
- html 花瓣飘落效果,html全屏花瓣掉落特效
代码片段和文件信息 属性 大小 日期 时间 名称 ----------- --------- ---------- ----- ---- 文件 ...
- js+css实现花瓣飘落效果
<div class="main pop-box"></div> css: @keyframes wind{0% {bottom: 100%;transfo ...
- java线程动画例子,动画 线程 花瓣飘落的效果 animation
[实例简介] android 线程 花瓣飘落的效果 很唯美! [实例截图] [核心代码] AnimationThread └── AnimationThread ├── AndroidManifest ...
- php花朵飘落特效,【新年气象】WordPress 主题添加花瓣飘落特效
摘要 分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围. [效果展示] [PHP文件] 此处为隐藏的内容 发表评论并刷新,方可查看 以上代码保存为hua.php文件,图片居右显示. [JS ...
- ES6公用花瓣飘落插件的封装及使用,支持npm安装
前言 此组件为本人使用ES6封装的花瓣飘落插件,已应用于多个活动,以下只分享组件的实现及使用方法,不涉及活动相关代码,插件已上传npm,可通过npm安装使用. github地址:https://git ...
最新文章
- Activemq的连接方式
- TensorFlow中文社区论坛 发布上线!
- access无法 dolby_如何解决windows 8无法开启杜比音效的问题
- 关于 ElesticSearch 安装
- 使用 Nexus3镜像搭设私有仓库(Bower 、Docker、Maven、npm、NuGet、Yum、PyPI)
- AI应用说 | 「虫口夺粮」的害虫识别还是牛场24小时无人监控,AI+农业话题咱们唠一唠...
- 天猫、京东双11销售总额超8894亿!媒体:双11成交额崇拜可休矣
- DockerDesktop安装以后,控制台输入docker version报错This error may indicate that the docker daemon is not running
- UNIGUI中如果获得Session情况
- matlab对信号加噪代码,Matlab给信号加噪声
- osu计算机科学硕士,OSU的CSE「俄亥俄州立大学计算机科学与工程系」
- Python框架:Django写图书管理系统(LMS)
- 计算机房通气换气次数,地下制冷机房,水泵房,配电房的排风量按多少换气次数计算...
- UNITY3D自学(六)-- unity视频播放的Quicktime问题
- 使用virt-install创建虚拟机
- Win10离线安装.NET Framework 3.5的方法技巧(附离线安装包下载)
- 500万相机芯片尺寸_相机常见感光芯片的几何尺寸
- 计算机英语五人对话,英文应聘对话5人的急求一篇英语对话 关于应聘的 最好是五人的...
- 分享113个JS特效动画效果,总有一款适合您
- idea 实现抽象类中的方法 快捷键
热门文章
- 武汉大学无线传感实验床项目招标公告(开标时间2015年1月15日)
- 计算机图形学——光线追踪(RayTracing)算法
- C语言指针 五分钟入门!你要是不理解,我就当场把这个编译器.........
- 短说 3.7.1正式版更新【新增悬赏问答、打赏、付费看帖、IP属地】
- 关于sbb eax, eax以及sbb eax, 0FFFFFFFFh指令连用
- 华为路由器RIP经典案例
- C语言每日一练——第28天:要求输出国际象棋棋盘
- SAS univariate过程
- 更安全的ftp服务器Pure-FTP搭建(4)
- 云原生时代一站式DevOps平台--阿里云效