jquery-slashes-and-circles/dist/jquery.slashes-and-circles.min.js

Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.

/*
 *  jquery-slashes-and-circles - v0.1.0
 *  Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.
 *  https://github.com/j0rdsta/jquery-slashes-and-circles
 *
 *  Made by Jordan Gardiner
 *  Under MIT License
 */
!function(a,b,c,d){"use strict";function e(b,c){this.element=b,this.settings=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="slashesAndCircles",g={elements:a(".slashes, .circles"),avoid:[],allowAnimation:!0};a.extend(e.prototype,{init:function(){return"function"!=typeof TweenLite?void console.error("TweenLite is not initialized. Quitting..."):(this.avoidCoords=this.addAvoidCoords(),this.svgDimensions=this.calculateSvgDimensions(),this.randomizePositions(!0,!1),this.initTimerAnimation(),void this.initResizeReflow())},initTimerAnimation:function(){function a(){setTimeout(function(){b.blurred||c.randomPositionAlongLine(),a()},3e3)}var c=this;b.onblur=function(){b.blurred=!0},b.onfocus=function(){b.blurred=!1},a()},initResizeReflow:function(){var c,d=this;a(b).on("resize",function(){clearTimeout(c),c=setTimeout(function(){d.avoidCoords=d.addAvoidCoords(),d.svgDimensions=d.calculateSvgDimensions(),d.randomizePositions(!1,!0)},250)})},addAvoidCoords:function(){return a(this.settings.avoid).map(function(b,c){var d=a(c).offset();return{w:a(c).width(),h:a(c).height(),x:d.left,y:d.top}})},calculateSvgDimensions:function(){return{w:this.element.getBBox().width,h:this.element.getBBox().height}},checkForCollisions:function(a,b,c){for(var d=0;d<a.length;d++){if(!("x"in a[d]&&"y"in a[d]&&"w"in a[d]&&"h"in a[d]))return!1;var e=b.x<=a[d].x+a[d].w&&b.x+b.w>=a[d].x&&b.y<=a[d].y+a[d].h&&b.y+b.h>=a[d].y,f=b.x>0&&b.x<=c.w-b.w,g=b.y>0&&b.y<=c.h-b.h;if(e||!f||!g)return!1}return!0},calculateAngledCoords:function(a,b){return{x:a.x-.6*b,y:a.y+b}},generateRandomCoords:function(b,c,d,e,f){var g,h=10;g={w:a(c).data("width")+h,h:a(c).data("height")+h};for(var i=!1,j=500;!i&&j>=0;){if(f===!0)g.x=parseInt(Math.random()*(d.w-g.w)),g.y=parseInt(Math.random()*(d.h-g.h));else{var k=Math.floor(200*Math.random())+-100,l={x:a(c).data("x"),y:a(c).data("y")};g=a.extend({},g,b.calculateAngledCoords(l,k))}if(!("x"in g&&"y"in g&&"w"in g&&"h"in g))return console.error("not all coords defined"),!1;i=b.checkForCollisions(e,g,d),j--}return 0>=j&&a(this).css({visibility:"hidden"}),g},randomizePositions:function(c,d){var e,f,g,h,i,j;j=this,i=jQuery.extend(!0,{},this.svgDimensions),h=jQuery.extend(!0,{},this.avoidCoords),g=a(b).width()/640,f=1>=g,e=Math.floor(g*this.settings.elements.length)-8,this.settings.elements.each(function(b,g){var k,l,m;if(!f||0!==e){if(k=j.generateRandomCoords(j,g,i,h,!0),h.push(k),!k)return void a(g).css({visibility:"hidden"});a(g).data("x",k.x),a(g).data("y",k.y);var n=j.calculateAngledCoords(k,1e3);m={x:n.x,y:n.y,opacity:0,visibility:"visible"},l={x:k.x,y:k.y,opacity:1,visibility:"visible",ease:Expo.easeOut,delay:.05*b},j.settings.allowAnimation===!1?TweenLite.set(a(this),l):d===!0?TweenLite.to(a(this),1,l):c===!0&&TweenLite.fromTo(a(this),1,m,l),e--}})},randomPositionAlongLine:function(){var b=this,c=jQuery.extend(!0,{},this.svgDimensions),d=jQuery.extend(!0,{},this.avoidCoords);this.settings.elements.each(function(e,f){var g={w:a(f).data("width"),h:a(f).data("height"),x:a(f).data("x"),y:a(f).data("y")};if(g=b.generateRandomCoords(b,f,c,d,!1),d.push(g),!g||isNaN(g.x)||isNaN(g.y))return!1;var h={x:g.x,y:g.y,ease:Expo.easeOut,delay:.05*e};b.settings.allowAnimation===!1?TweenLite.set(a(this),h):TweenLite.to(a(f),1,h),a(f).data("x",g.x),a(f).data("y",g.y)})}}),a.fn[f]=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);