Implementation of shutter animation effect based on JavaScript not only Flas can realize _javascript skill

See this kind of what blinds the animation, thought all is the flash realization, recently suddenly a flash, thought of using JS implementation (although I do not do front-end, I do. net). Although the code implemented, but more chaotic, the first figure:

A JS animation, previously thought that only flash can achieve

The code is mainly mathematical calculation, and then combined with HTML,CSS to create a similar effect of flash.

The main parts of the code are posted below:

function all {for (Var i=;i<self.rows;i++) {for (var j =; J < Self.columns; J + +) {if (!books[i][j)) return F
Alse;
} return true; function Resetbooks {for (var i=;i<self.rows;i++) {for (var j =; J < Self.columns; J + +) {Books[i][j]=fals
E
} return true;
} var self=this,timer=null,_iindex=;
var initdir=[[[,],[,]],[[-,],[,]],[[,-],[-,]],[[,-],[,]],[[,-],[,],[,],[-,]]],dir=initdir[];
var weight=[,,,,]; var initpos=[[{x:,y:-}],[{x:self.columns-,y:-}],[{x:self.columns-,y:self.rows}],[{x:,y:self.rows}],[{x:
self.columns/,y:self.rows/}]]; Timer=setinterval (function () {var n=[]; for (var i=;i<self.predivs.length;i++) {var _div=null,x=, y=; for (Var j=;j <dir.length;j++) {x=self.predivs[i].x+dir[j][]; y=self.predivs[i].y+dir[j][]; if (x>=&&y>=& &x<self.columns&&y<self.rows&&!self.books[y][x]) {self.books[y][x]=true; _div=
SELF.ZZDIVSTATCK[Y][X];
N.push ({x:x,y:y}); _div.style.backgroundimage = "url (" + Self.zzimages[_iiNdex] + ")";
_div.style.backgroundpositionx = (x * self.zzdivw) + "px";
_div.style.backgroundpositiony = (Y * self.zzdivh) + "px";
}} self.predivs=n; if (All (Self.books)) {resetbooks (self.books); var _r=util.randomweight (weight); self.predivs = Initpos[_r]; dir=
Initdir[_r];
_iindex++; } if (_iindex>=+self.zzimages.length) {_iindex=}},);

The above code is the use of JavaScript implementation of the shutter animation effect, I hope to help!