animated_brackets
Version:
animated brackets
3 lines (2 loc) • 2.5 kB
JavaScript
;!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"undefined"!=typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){t.fn.animatedBrackets=function(e){function o(t){var e=t.element,o=n(e.get(0));e.attr("stroke-dasharray",o),e.attr("stroke-dashoffset",o)}function n(t){for(var e=0,o=void 0,n=t,i=0;i<n.points.numberOfItems;i++){var r=n.points.getItem(i);i>0&&(e+=Math.sqrt(Math.pow(r.x-o.x,2)+Math.pow(r.y-o.y,2))),o=r}return e}function i(t){(new TimelineLite).staggerTo(t.path,t.duration,{attr:{"stroke-dashoffset":0}},t.delay)}function r(t){var e=t.element,o=t.points,n="";o.forEach(function(e){n+=t.element_width/100*e[0]+", "+t.element_height/100*e[1]+" "}),e.attr("points",n),e.attr("style","stroke:"+t.color+"; stroke-width:"+t.stroke_width+"; fill:none")}var f=t.extend({points:["0 20, 0 0, 100 0, 100 20","100 80, 100 100, 0 100, 0 80"],color:"#ffffff",stroke_width:10,duration:1,delay:1},e);t(this).each(function(){function e(){a.forEach(function(t){r({element:t.element,points:t.points,element_width:s,element_height:l,color:f.color,stroke_width:f.stroke_width}),u||o({element:t.element})}),h=!0}var n=t(this),s=0,l=0,a=[],h=!1,u=!1,d=t(document.createElementNS("http://www.w3.org/2000/svg","svg"));f.points.forEach(function(t){var e=t.split(", "),o=[];e.forEach(function(t){o.push(t.split(" "))}),a.push({points:o})}),n.append(d),n.css({position:"relative"}),d.css({width:"100%",height:"100%",position:"absolute",left:0,top:0,overflow:"visible"}),a.forEach(function(e){e.element=t(document.createElementNS("http://www.w3.org/2000/svg","polyline")),d.append(e.element)}),t(window).on("load resize",function(){s=n.outerWidth(),l=n.outerHeight(),e()}),t(window).on("load scroll resize",function(){h&&n.isOnScreen(.5,.5)&&!u&&(i({path:n.find("polyline"),duration:f.duration,delay:f.delay}),u=!0)})})},t.fn.isOnScreen=function(e,o){null!=e&&void 0!==e||(e=1),null!=o&&void 0!==o||(o=1);var n=t(window),i={top:n.scrollTop(),left:n.scrollLeft()};i.right=i.left+n.width(),i.bottom=i.top+n.height();var r=this.outerHeight(),f=this.outerWidth();if(!f||!r)return!1;var s=this.offset();if(s.right=s.left+f,s.bottom=s.top+r,!!(i.right<s.left||i.left>s.right||i.bottom<s.top||i.top>s.bottom))return!1;var l={top:Math.min(1,(s.bottom-i.top)/r),bottom:Math.min(1,(i.bottom-s.top)/r),left:Math.min(1,(s.right-i.left)/f),right:Math.min(1,(i.right-s.left)/f)};return l.left*l.right>=e&&l.top*l.bottom>=o}});
//# sourceMappingURL=animatedBrackets.min.js.map