- 浏览: 12200 次
- 性别:
- 来自: 合肥
最新评论
前段时间做了一个注册用户界面,需要美化一下背景:
配置文件:
配置文件:
/** * Particleground demo * @author Jonathan Nicol - @mrjnicol */ $(document).ready(function() { $('#particles').particleground({ dotColor: '#eae8e8', lineColor: '#eae8e8' }); $('.intro').css({ 'margin-top': -($('.intro').height() / 2) }); });
/** * Particleground * * @author Jonathan Nicol - @mrjnicol * @version 1.0.1 * @description Creates a canvas based particle system background * * Inspired by: * http://requestlab.fr/ * http://disruptivebydesign.com/ * * @license The MIT License (MIT) * * Copyright (c) 2014 Jonathan Nicol - @mrjnicol * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ !function(a){function b(b,d){function e(){if(w){$canvas=a('<canvas class="pg-canvas"></canvas>'),v.prepend($canvas),p=$canvas[0],q=p.getContext("2d"),f();for(var b=Math.round(p.width*p.height/d.density),c=0;b>c;c++){var e=new l;e.setStackPos(c),x.push(e)}a(window).on("resize",function(){h()}),a(document).on("mousemove",function(a){y=a.pageX,z=a.pageY}),B&&!A&&window.addEventListener("deviceorientation",function(){D=Math.min(Math.max(-event.beta,-30),30),C=Math.min(Math.max(-event.gamma,-30),30)},!0),g(),o("onInit")}}function f(){p.width=v.width(),p.height=v.height(),q.fillStyle=d.dotColor,q.strokeStyle=d.lineColor,q.lineWidth=d.lineWidth}function g(){if(w){s=a(window).width(),t=a(window).height(),q.clearRect(0,0,p.width,p.height);for(var b=0;b<x.length;b++)x[b].updatePosition();for(var b=0;b<x.length;b++)x[b].draw();E||(r=requestAnimationFrame(g))}}function h(){for(f(),i=x.length-1;i>=0;i--)(x[i].position.x>v.width()||x[i].position.y>v.height())&&x.splice(i,1);var a=Math.round(p.width*p.height/d.density);if(a>x.length)for(;a>x.length;){var b=new l;x.push(b)}else a<x.length&&x.splice(a);for(i=x.length-1;i>=0;i--)x[i].setStackPos(i)}function j(){E=!0}function k(){E=!1,g()}function l(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*p.width),y:Math.ceil(Math.random()*p.height)},this.speed={},d.directionX){case"left":this.speed.x=+(-d.maxSpeedX+Math.random()*d.maxSpeedX-d.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*d.maxSpeedX+d.minSpeedX).toFixed(2);break;default:this.speed.x=+(-d.maxSpeedX/2+Math.random()*d.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?d.minSpeedX:-d.minSpeedX}switch(d.directionY){case"up":this.speed.y=+(-d.maxSpeedY+Math.random()*d.maxSpeedY-d.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*d.maxSpeedY+d.minSpeedY).toFixed(2);break;default:this.speed.y=+(-d.maxSpeedY/2+Math.random()*d.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?d.minSpeedY:-d.minSpeedY}}function m(a,b){return b?void(d[a]=b):d[a]}function n(){v.find(".pg-canvas").remove(),o("onDestroy"),v.removeData("plugin_"+c)}function o(a){void 0!==d[a]&&d[a].call(u)}var p,q,r,s,t,u=b,v=a(b),w=!!document.createElement("canvas").getContext,x=[],y=0,z=0,A=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),B=!!window.DeviceOrientationEvent,C=0,D=0,E=!1;return d=a.extend({},a.fn[c].defaults,d),l.prototype.draw=function(){q.beginPath(),q.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,d.particleRadius/2,0,2*Math.PI,!0),q.closePath(),q.fill(),q.beginPath();for(var a=x.length-1;a>this.stackPos;a--){var b=x[a],c=this.position.x-b.position.x,e=this.position.y-b.position.y,f=Math.sqrt(c*c+e*e).toFixed(2);f<d.proximity&&(q.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY),d.curvedLines?q.quadraticCurveTo(Math.max(b.position.x,b.position.x),Math.min(b.position.y,b.position.y),b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY):q.lineTo(b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY))}q.stroke(),q.closePath()},l.prototype.updatePosition=function(){if(d.parallax){if(B&&!A){var a=(s-0)/60;pointerX=(C- -30)*a+0;var b=(t-0)/60;pointerY=(D- -30)*b+0}else pointerX=y,pointerY=z;this.parallaxTargX=(pointerX-s/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10,this.parallaxTargY=(pointerY-t/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}switch(d.directionX){case"left":this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=v.width()-this.parallaxOffsetX);break;case"right":this.position.x+this.speed.x+this.parallaxOffsetX>v.width()&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>v.width()||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(d.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=v.height()-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>v.height()&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>v.height()||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},l.prototype.setStackPos=function(a){this.stackPos=a},e(),{option:m,destroy:n,start:k,pause:j}}var c="particleground";a.fn[c]=function(d){if("string"==typeof arguments[0]){var e,f=arguments[0],g=Array.prototype.slice.call(arguments,1);return this.each(function(){a.data(this,"plugin_"+c)&&"function"==typeof a.data(this,"plugin_"+c)[f]&&(e=a.data(this,"plugin_"+c)[f].apply(this,g))}),void 0!==e?e:this}return"object"!=typeof d&&d?void 0:this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(this,d))})},a.fn[c].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){},onDestroy:function(){}}}(jQuery),/** * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating * @license: MIT license */ function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})}();
发表评论
-
将GPS坐标转为百度地图经纬度等
2017-09-27 11:36 1398/** * 坐标系转换函数 * WGS->GCJ ... -
初步学习ecmaScript6
2017-07-26 17:17 474<!DOCTYPE HTML> <ht ... -
css两端对齐的思考
2017-07-06 16:06 765最近上公开课,讲到css ... -
如何让对象按照Key值来排序
2017-07-04 10:30 3775在开发即席查询的树状展示机型的时候,需要将制造商按照a-z的顺 ... -
require.js的初次使用心得
2017-06-14 17:55 414初次使用js的模块化开发,将之前在一个页面中的很多functi ... -
自制让dom元素抖动的插件方法
2017-06-14 17:40 599如何让输入框在输入错误的时候抖动产生一种输入错误的视觉效果呢? ... -
由eval(...) !== (1,eval)(...)引发的思考
2017-06-14 17:23 530先看一个例子 var x = 'outer'; (funct ... -
eval 和 new Function
2017-06-14 17:03 540[size=large][size=large][size=x ...
相关推荐
仿知乎登录界面的风格,蓝色背景,渐变效果。
期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+...
java课程设计java课程设计基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zipjava课程设计java课程设计基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zipjava课程设计java课程设计基于Servlet+MySql+JSP的简易仿...
FZHHomeView 仿知乎网页版首页的背景特效
微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序...
一共有两个效果图,一个是知乎首页的原版效果图,一个是稍微改进的效果图。绝对是你想找的知乎首页登录的背景图,一定是你想要的
高仿知乎日报 APK下载 百度网盘 或 CSDN 教程 高仿知乎日报(一) 高仿知乎日报(二) 高仿知乎日报(三) 高仿知乎日报(四) 高仿知乎日报(五) 高仿知乎日报(六) 知乎日报API 知乎日报API 来自izzyleung,在此表示感谢 已...
HTML5Canvas知乎登录页面动态线条背景动画代码
cavas仿知乎动态背景效果,自适应分辨率,里面有详细代码,带注释
1、这是一款仿知乎PC端登录注册的模版 2、包括二维码登录,高仿逼真 3、收费只是想让你们知道资源得来不易
仿知乎问答社区响应式源码带打赏功能,支持文章、话题、第三方登录、文章和问题打赏,作者打赏,回答者打赏,设置好可以在线充值等!后台功能非常强大,亲测,非常完整好用! 本站长亲自搭建运营 知乎更像一个论坛...
微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip ...
仿知乎每天更新好文章,包括权威的时事解读、有趣的生活建议 更符合用户口味的「主题日报」,覆盖电影、财经、设计、体育等领域 长评优先展示 离线下载功能,及时缓存近期的 30 篇文章
仿知乎滑动隐藏与显示ToolBar,SwipRefreshLayout刷新
Swift精仿知乎日报iOS端
仿知乎做的App,项目功能并不完整,但是还行,涉及到了eventbus、glide,material design,cardview和volley网络请求
仿知乎界面的源码,界面和知乎界面差不多,有兴趣的可以下载 ,看看Android 代码
zhihu-particle 仿知乎登录页面,基于canvas实现了一个粒子(Particle)随机运动的动画效果
高仿知乎日报 Material Design MVP RxJava Retrofit for android