html - jQuery Shutter occupying all the document (Camera Effect) -
i using example getting camera shutter effect: click here
so, need effect occupying document (width: 100% , height: 100%), but, how i've do?
because if set var container = $('body'); effect not occupy window. so, i've do? larger image?
because body's height not cover entire page, should add height: 100%; in html tag below:
html{ background:url('../img/bg_tile.jpg') repeat; height: 100%; } but here comes issue, plugin draws canvas depends on object's height. can see 2 images(http://i.imgur.com/bycsnse.png, http://i.imgur.com/dmfdanc.png) tested in browser different width.
i think effect not want. , think can re-written css3, canvas plugin may speed down when size large.
to solve problem, edited jquery.shutter.js let canvas size equals body size, , resize image(shutter.png) 2x below:
line 37:
var frames = {num:15, height:element.height(), width:element.width()}, line 128:
c.drawimage(img,-slices.width,-(frames.height/2 + offset), 416*2, 500*2); entire jquery.shutter.js:
(function(){ // creating regular jquery plugin: $.fn.tzshutter = function(options){ // checking canvas support. works in modern browsers: var supportscanvas = 'getcontext' in document.createelement('canvas'); // providing default values: options = $.extend({ opencallback:function(){}, closecallback:function(){}, loadcompletecallback:function(){}, hidewhenopened:true, imgsrc: 'jquery.shutter/shutter.png' },options); var element = this; if(!supportscanvas){ // if there no support canvas, bind // callack functions straight away , exit: element.bind('shutteropen',options.opencallback) .bind('shutterclose',options.closecallback); options.loadcompletecallback(); return element; } window.settimeout(function(){ var frames = {num:15, height:element.height(), width:element.width()}, slices = {num:8, width: 416, height:500, startdeg:30}, animation = { width : element.width(), height : element.height(), offsettop: (frames.height-element.height())/2 }, // calculate rotate difference between // slices of shutter. (2*math.pi equals 360 degrees in radians): rotatestep = 2*math.pi/slices.num, rotatedeg = 30; // calculating offset slices.anglestep = ((90 - slices.startdeg)/frames.num)*math.pi/180; // shutter slice image: var img = new image(); // defining callback before setting source of image: img.onload = function(){ window.console && console.time && console.time("generating frames"); // film div holds 15 canvas elements (or frames). var film = $('<div>',{ classname: 'film', css:{ height: frames.num*frames.height, width: frames.width, marginleft: -frames.width/2, // centering horizontally top: -animation.offsettop } }); // animation holder hides film overflow:hidden, // exposing 1 frame @ time. var animationholder = $('<div>',{ classname: 'shutteranimationholder', css:{ width:animation.width, height:animation.height } }); for(var z=0;z<frames.num;z++){ // creating 15 canvas elements. var canvas = document.createelement('canvas'), c = canvas.getcontext("2d"); canvas.width=frames.width; canvas.height=frames.height; c.translate(frames.width/2,frames.height/2); for(var i=0;i<slices.num;i++){ // each canvas, generate different // states of shutter drawing shutter // slices different rotation difference. // rotating canvas step, can // paint different slices of shutter. c.rotate(-rotatestep); // saving current rotation settings, can revert // them after applying additional rotation slice. c.save(); // moving origin point (around rotating // canvas) bottom-center of shutter slice. c.translate(0,frames.height/2); // rotation determines how shutter opened. c.rotate((frames.num-1-z)*slices.anglestep); // additional offset, applied last 5 frames, // smoother animation: var offset = 0; if((frames.num-1-z) <5){ offset = (frames.num-1-z)*5; } // drawing shutter image c.drawimage(img,-slices.width,-(frames.height/2 + offset), 416*2, 500*2); // reverting saved settings above. c.restore(); } // adding canvas (or frame) film div. film.append(canvas); } // appending film animation holder. animationholder.append(film); if(options.hidewhenopened){ animationholder.hide(); } element.css('position','relative').append(animationholder); var animating = false; // binding custom open , close events, trigger // shutter animations. element.bind('shutterclose',function(){ if(animating) return false; animating = true; var count = 0; var close = function(){ (function animate(){ if(count>=frames.num){ animating=false; // calling user provided callback. options.closecallback.call(element); return false; } film.css('top',-frames.height*count - animation.offsettop); count++; settimeout(animate,20); })(); } if(options.hidewhenopened){ animationholder.fadein(60,close); } else close(); }); element.bind('shutteropen',function(){ if(animating) return false; animating = true; var count = frames.num-1; (function animate(){ if(count<0){ var hide = function(){ animating=false; // calling user supplied callback: options.opencallback.call(element); }; if(options.hidewhenopened){ animationholder.fadeout(60,hide); } else{ hide(); } return false; } film.css('top',-frames.height*count - animation.offsettop); count--; settimeout(animate,20); })(); }); // writing timing information if // firebug/web development console opened: window.console && console.timeend && console.timeend("generating frames"); options.loadcompletecallback(); }; img.src = options.imgsrc; },0); return element; }; })(jquery);
Comments
Post a Comment