237 lines
36 KiB
JavaScript
237 lines
36 KiB
JavaScript
|
var CanvasBG = function (options) {
|
||
|
|
|
||
|
|
var width, height, largeHeader, canvas, ctx, points, animateHeader = true;
|
||
|
|
|
||
|
|
function initHeader(options) {
|
||
|
|
|
||
|
|
target = options.Loc;
|
||
|
|
|
||
|
|
largeHeader = document.getElementById('canvas-wrapper');
|
||
|
|
// largeHeader.style.height = height+'px';
|
||
|
|
|
||
|
|
canvas = document.getElementById('demo-canvas');
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// create points
|
||
|
|
points = [];
|
||
|
|
for(var x = 0; x < width; x = x + width/20) {
|
||
|
|
for(var y = 0; y < height; y = y + height/20) {
|
||
|
|
var px = x + Math.random()*width/20;
|
||
|
|
var py = y + Math.random()*height/20;
|
||
|
|
var p = {x: px, originX: px, y: py, originY: py };
|
||
|
|
points.push(p);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// for each point find the 5 closest points
|
||
|
|
for(var i = 0; i < points.length; i++) {
|
||
|
|
var closest = [];
|
||
|
|
var p1 = points[i];
|
||
|
|
for(var j = 0; j < points.length; j++) {
|
||
|
|
var p2 = points[j]
|
||
|
|
if(!(p1 == p2)) {
|
||
|
|
var placed = false;
|
||
|
|
for(var k = 0; k < 5; k++) {
|
||
|
|
if(!placed) {
|
||
|
|
if(closest[k] == undefined) {
|
||
|
|
closest[k] = p2;
|
||
|
|
placed = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for(var k = 0; k < 5; k++) {
|
||
|
|
if(!placed) {
|
||
|
|
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
|
||
|
|
closest[k] = p2;
|
||
|
|
placed = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
p1.closest = closest;
|
||
|
|
}
|
||
|
|
|
||
|
|
// assign a circle to each point
|
||
|
|
for(var i in points) {
|
||
|
|
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
|
||
|
|
points[i].circle = c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event handling
|
||
|
|
function addListeners() {
|
||
|
|
if(!('ontouchstart' in window)) {
|
||
|
|
window.addEventListener('mousemove', mouseMove);
|
||
|
|
}
|
||
|
|
window.addEventListener('scroll', scrollCheck);
|
||
|
|
window.addEventListener('resize', resize);
|
||
|
|
}
|
||
|
|
|
||
|
|
function mouseMove(e) {
|
||
|
|
var posx = posy = 0;
|
||
|
|
if (e.pageX || e.pageY) {
|
||
|
|
posx = e.pageX;
|
||
|
|
posy = e.pageY;
|
||
|
|
}
|
||
|
|
else if (e.clientX || e.clientY) {
|
||
|
|
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||
|
|
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
||
|
|
}
|
||
|
|
target.x = posx;
|
||
|
|
target.y = posy;
|
||
|
|
}
|
||
|
|
|
||
|
|
function scrollCheck() {
|
||
|
|
if(document.body.scrollTop > height) animateHeader = false;
|
||
|
|
else animateHeader = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function resize() {
|
||
|
|
width = window.innerWidth;
|
||
|
|
height = window.innerHeight;
|
||
|
|
largeHeader.style.height = height+'px';
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
}
|
||
|
|
|
||
|
|
// animation
|
||
|
|
function initAnimation() {
|
||
|
|
animate();
|
||
|
|
for(var i in points) {
|
||
|
|
shiftPoint(points[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
if(animateHeader) {
|
||
|
|
ctx.clearRect(0,0,width,height);
|
||
|
|
for(var i in points) {
|
||
|
|
// detect points in range
|
||
|
|
if(Math.abs(getDistance(target, points[i])) < 4000) {
|
||
|
|
points[i].active = 0.3;
|
||
|
|
points[i].circle.active = 0.6;
|
||
|
|
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
|
||
|
|
points[i].active = 0.1;
|
||
|
|
points[i].circle.active = 0.3;
|
||
|
|
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
|
||
|
|
points[i].active = 0.02;
|
||
|
|
points[i].circle.active = 0.1;
|
||
|
|
} else {
|
||
|
|
points[i].active = 0;
|
||
|
|
points[i].circle.active = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
drawLines(points[i]);
|
||
|
|
points[i].circle.draw();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function shiftPoint(p) {
|
||
|
|
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
|
||
|
|
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
|
||
|
|
onComplete: function() {
|
||
|
|
shiftPoint(p);
|
||
|
|
}});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Canvas manipulation
|
||
|
|
function drawLines(p) {
|
||
|
|
if(!p.active) return;
|
||
|
|
for(var i in p.closest) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(p.x, p.y);
|
||
|
|
ctx.lineTo(p.closest[i].x, p.closest[i].y);
|
||
|
|
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function Circle(pos,rad,color) {
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
// constructor
|
||
|
|
(function() {
|
||
|
|
_this.pos = pos || null;
|
||
|
|
_this.radius = rad || null;
|
||
|
|
_this.color = color || null;
|
||
|
|
})();
|
||
|
|
|
||
|
|
this.draw = function() {
|
||
|
|
if(!_this.active) return;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
|
||
|
|
ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
|
||
|
|
ctx.fill();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Util
|
||
|
|
function getDistance(p1, p2) {
|
||
|
|
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
init: function (options) {
|
||
|
|
width = window.innerWidth;
|
||
|
|
height = window.innerHeight;
|
||
|
|
|
||
|
|
// Set Default Options
|
||
|
|
var defaults = {
|
||
|
|
Loc: {x: width/2, y: height/1},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Extend Default Options.
|
||
|
|
var options = $.extend({}, defaults, options);
|
||
|
|
|
||
|
|
// Call Core Functions
|
||
|
|
initHeader(options);
|
||
|
|
initAnimation();
|
||
|
|
addListeners();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}();
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* VERSION: beta 1.9.4
|
||
|
|
* DATE: 2014-07-17
|
||
|
|
* UPDATES AND DOCS AT: http://www.greensock.com
|
||
|
|
*
|
||
|
|
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
|
||
|
|
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
|
||
|
|
* Club GreenSock members, the software agreement that was issued with your membership.
|
||
|
|
*
|
||
|
|
* @author: Jack Doyle, jack@greensock.com
|
||
|
|
**/
|
||
|
|
;
|
||
|
|
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||
|
|
* http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||
|
|
*
|
||
|
|
* requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
||
|
|
*
|
||
|
|
* MIT license
|
||
|
|
**/
|
||
|
|
;
|
||
|
|
!function(){for(var n=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16-(e-n)),o=window.setTimeout(function(){i(e+a)},a);return n=e+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}();
|
||
|
|
|
||
|
|
/*!
|
||
|
|
* VERSION: 1.13.1
|
||
|
|
* DATE: 2014-07-22
|
||
|
|
* UPDATES AND DOCS AT: http://www.greensock.com
|
||
|
|
*
|
||
|
|
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
|
||
|
|
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
|
||
|
|
* Club GreenSock members, the software agreement that was issued with your membership.
|
||
|
|
*
|
||
|
|
* @author: Jack Doyle, jack@greensock.com
|
||
|
|
*/
|
||
|
|
(function(t,e){"use strict";var i=t.GreenSockGlobals=t.GreenSockGlobals||t;if(!i.TweenLite){var s,n,r,a,o,l=function(t){var e,s=t.split("."),n=i;for(e=0;s.length>e;e++)n[s[e]]=n=n[s[e]]||{};return n},h=l("com.greensock"),_=1e-10,u=function(t){var e,i=[],s=t.length;for(e=0;e!==s;i.push(t[e++]));return i},f=function(){},m=function(){var t=Object.prototype.toString,e=t.call([]);return function(i){return null!=i&&(i instanceof Array||"object"==typeof i&&!!i.push&&t.call(i)===e)}}(),p={},c=function(s,n,r,a){this.sc=p[s]?p[s].sc:[],p[s]=this,this.gsClass=null,this.func=r;var o=[];this.check=function(h){for(var _,u,f,m,d=n.length,v=d;--d>-1;)(_=p[n[d]]||new c(n[d],[])).gsClass?(o[d]=_.gsClass,v--):h&&_.sc.push(this);if(0===v&&r)for(u=("com.greensock."+s).split("."),f=u.pop(),m=l(u.join("."))[f]=this.gsClass=r.apply(r,o),a&&(i[f]=m,"function"==typeof define&&define.amd?define((t.GreenSockAMDPath?t.GreenSockAMDPath+"/":"")+s.split(".").pop(),[],function(){return m}):s===e&&"undefined"!=typeof module&&module.exports&&(module.exports=m)),d=0;this.sc.length>d;d++)this.sc[d].check()},this.check(!0)},d=t._gsDefine=function(t,e,i,s){return new c(t,e,i,s)},v=h._class=function(t,e,i){return e=e||function(){},d(t,[],function(){return e},i),e};d.globals=i;var g=[0,0,1,1],T=[],y=v("easing.Ease",function(t,e,i,s){this._func=t,this._type=i||0,this._power=s||0,this._params=e?g.concat(e):g},!0),w=y.map={},P=y.register=function(t,e,i,s){for(var n,r,a,o,l=e.split(","),_=l.length,u=(i||"easeIn,easeOut,easeInOut").split(",");--_>-1;)for(r=l[_],n=s?v("easing."+r,null,!0):h.easing[r]||{},a=u.length;--a>-1;)o=u[a],w[r+"."+o]=w[o+r]=n[o]=t.getRatio?t:t[o]||new t};for(r=y.prototype,r._calcEnd=!1,r.getRatio=function(t){if(this._func)return this._params[0]=t,this._func.apply(null,this._params);var e=this._type,i=this._power,s=1===e?1-t:2===e?t:.5>t?2*t:2*(1-t);return 1===i?s*=s:2===i?s*=s*s:3===i?s*=s*s*s:4===i&&(s*=s*s*s*s),1===e?1-s:2===e?s:.5>t?s/2:1-s/2},s=["Linear","Quad","Cubic","Quart","Quint,Strong"],n=s.length;--n>-1;)r=s[n]+",Power"+n,P(new y(null,null,1,n),r,"easeOut",!0),P(new y(null,null,2,n),r,"easeIn"+(0===n?",easeNone":"")),P(new y(null,null,3,n),r,"easeInOut");w.linear=h.easing.Linear.easeIn,w.swing=h.easing.Quad.easeInOut;var b=v("events.EventDispatcher",function(t){this._listeners={},this._eventTarget=t||this});r=b.prototype,r.addEventListener=function(t,e,i,s,n){n=n||0;var r,l,h=this._listeners[t],_=0;for(null==h&&(this._listeners[t]=h=[]),l=h.length;--l>-1;)r=h[l],r.c===e&&r.s===i?h.splice(l,1):0===_&&n>r.pr&&(_=l+1);h.splice(_,0,{c:e,s:i,up:s,pr:n}),this!==a||o||a.wake()},r.removeEventListener=function(t,e){var i,s=this._listeners[t];if(s)for(i=s.length;--i>-1;)if(s[i].c===e)return s.splice(i,1),void 0},r.dispatchEvent=function(t){var e,i,s,n=this._listeners[t];if(n)for(e=n.length,i=this._eventTarget;--e>-1;)s=n[e],s.up?s.c.call(s.s||i,{type:t,target:i}):s.c.call(s.s||i)};var k=t.requestAnimationFrame,A=t.cancelAnimationFrame,S=Date.now||function(){return(new Date).getTime()},x=S();for(s=["ms","moz","webkit","o"],n=s.length;--n>-1&&!k;)k=t[s[n]+"RequestAnimationFrame"],A=t[s[n]+"CancelAnimationFrame"]||t[s[n]+"CancelRequestAnimationFrame"];v("Ticker",function(t,e){var i,s,n,r,l,h=this,u=S(),m=e!==!1&&k,p=500,c=33,d=function(t){var e,a,o=S()-x;o>p&&(u+=o-c),x+=o,h.time=(x-u)/1e3,e=h.time-l,(!i||e>0||t===!0)&&(h.frame++,l+=e+(e>=r?.004:r-e),a=!0),t!==!0&&(n=s(d)),a&&h.dispatchEvent("tick")};b.call(h),h.time=h.frame=0,h.tick=function(){d(!0)},h.lagSmoothing=function(t,e){p=t||1/_,c=Math.min(e,p,0)},h.sleep=function(){null!=n&&(m&&A?A(n):clearTimeout(n),s=f,n=null,h===a&&(o=!1))},h.wake=function(){null!==n?h.sleep():h.frame>10&&(x=S()-p+5),s=0===i?f:m&&k?k:function(t){return setTimeout(t,0|1e3*(l-h.time)+1)},h===a&&(o=!0),d(2)},h.fps=function(t){return arguments.length?(i=t,r=1/(i||60),l=this.time+r,h.wake(),void 0):i},h.useRAF=function(t){return arguments.length?(h.sleep(),m=t,h.fps(i),void 0):m},h.fps(t),setTimeout(function(){m&&(!n||5>h.frame)&&h.useRAF(!1)},1500)}),r=h.Ticker.prototype=new h.events.EventDispatcher,r.constructor=h.Ti
|