JS implementation a bit of a dazzling picture display effect-picture disintegration and combination

Original: JS to achieve a bit of a dazzling picture display effect-image disintegration and combination

After 4 months of hard study, ushered in the market to enter the last learning project. I imitated a picture to show the effect, used in the project, feel very dazzle. Here to share, I hope you like ~!

The small or the first ~

Http://runjs.cn/detail/tl9quyke This is the effect of the demo link ~ ashamed, just beginning to write Bo, will not add demo here. Trying to ...

　　

1. Is the beginning of the action of the picture, the small box from the various locations flying, combined together;

　　

2. is a small block combination of pictures;

3. Is the click of the picture, the small block spread out the effect of flying;

I started thinking about doing this because I saw the slide transition effect on the homepage of the Beijing Smart Club, and I didn't have a concept with the front-end programmer.

Now that he has entered the industry, and has been full-time study for 4 months, so try to achieve this effect. Of course, on the homepage of the Smart Club than the younger brother this high-end many.

Below, I explain my idea of this effect:

1. Since the whole picture container is made up of a lot of small squares, then the width of the container is the width of a row of small squares, and the height is the height of a column of small squares;

2. To set the background image for each small square, note: Each small box background picture, is a complete background picture, that is the last piece of the picture to be spelled;

3. Through the double for loop, control the initial position of each block (in order to let the small square evenly allocated to 4 quadrants, I use 4 if judgment, the code appears to be somewhat redundant), then they will fly from the initial position into the container, together;

4. When the background-position is not set, the picture in the small box shows the same, which is the upper left corner of the picture. To make each small square display of the picture is exactly the complete picture, it is necessary according to this is the X line, the first y small square to set its background-position, that is, the first x row, the first y small square The background-position value should be: squarewidth* (Y-1) px squareheight* (X-1) px, if viewed from the I, J parameters in the loop , just correspond!

5. After triggering the combo event, let these small squares fly over, according to the value of I,j fly to their respective position in the picture, this position is in order, so it is also very good implementation.

6. Disintegration is the reverse of the line ~

OK, below I posted my own code, Hey, although the code is very elementary, may seem very low-end, but I finished some of the special effects, and students also like, or feel very happy.

Last few days, come on, ~day day up!!!

Here is the HTML code:

<Buttononclick= "Bomb ()">Break it Up! Little universe!</Button><DivID= "Container">//This is a container<Divclass= "LOGIN-BG"></Div>    <Divclass= "LOGIN-BG"></Div>    <Divclass= "LOGIN-BG"></Div>    <!--here to add the number of small squares you need div, class named according to your liking,
My example is 81 blocks, so the following conditions for I and J are "less than 9" -</Div>

Here is the CSS code:

#container{position:Absolute;width:360px;Height:360px;Z-index:10000;Top:150px; Left:50%;Margin-left:-270px;Display:none;-webkit-border-radius:10px;-moz-border-radius:10px;Border-radius:10px;}. LOGIN-BG{position:Absolute;width:40px;Height:40px;Background-image:URL ("login-bg7.png");background-size:360px 360px;Opacity:0;}

Here is the JS code:

　　　　

varBgarr = $ (". Login-bg");//get all background small squares in the array for(vari=0;i<9;i++) {//The double for loop initializes the position of each small square, and puts them into 4 quadrants by random number, I control row, J control column     for(varj=0;j<9;j++) {$ (bgarr[9*I+J]). CSS ({//set the background position of each small square separatelybackgroundposition:-40*j+ "px" + ( -40*i) + "px"        })        if(j%4==0) {//Place small squares that meet the criteria in the second quadrant$ (bgarr[9*i+j]). CSS ({top:parseint (Math.random ()*600) + "px", Left:parseint (Math.random ()*600) + "px"            }); }Else if(j%4==1) {//Place small squares that meet the conditions in Quadrant four$ (bgarr[9*i+j]). CSS ({top:-parseint (Math.random () *600) + "px", left:-parseint (Math.random () *600) + "px"            }); }Else if(j%4==2) {//Place small squares that meet the criteria in the third quadrant$ (bgarr[9*i+j]). CSS ({top:parseint (Math.random ()*600) + "px", left:-parseint (Math.random () *600) + "px"            }); }Else if(j%4==3) {//Place small squares that meet the criteria in the first quadrant$ (bgarr[9*i+j]). CSS ({top:-parseint (Math.random () *600) + "px", Left:parseint (Math.random ()*600) + "px"            }); }    }}functionBomb () {//key Functions$ ("#container"). Show ();//container showing the background small squares     for(vari=0;i<9;i++){         for(varj=0;j<9;j++) {$ (bgarr[9*I+J]). Animate ({//animation of small squares flying into container rangetop:40*i+ "px",//double for loop sets the position of the block after the comboleft:40*j+ "px", opacity:1            },1000); }    }}$("#container"). Click (function(){//after the picture combination, when the container is clicked, the small square is scattered, the picture disintegrates     for(vari=0;i<9;i++) {//double for loop again to let the block out of the four quadrants         for(varj=0;j<9;j++){            if(j%4==0) {$ (bgarr[9*i+j]). Animate ({Top:parseint (Math.random ()*600) + "px", Left:parseint (Math.random ()*600) + "px", opacity:0                },1000); }Else if(j%4==1) {$ (bgarr[9*i+j]). Animate ({top:-parseint (Math.random () *600) + "px", left:-parseint (Math.random () *600) + "px", opacity:0                },1000); }Else if(j%4==2) {$ (bgarr[9*i+j]). Animate ({Top:parseint (Math.random ()*600) + "px", left:-parseint (Math.random () *600) + "px", opacity:0                },1000); }Else if(j%4==3) {$ (bgarr[9*i+j]). Animate ({top:-parseint (Math.random () *600) + "px", Left:parseint (Math.random ()*600) + "px", opacity:0                },1000); }}} setTimeout (HIDEBG,1100);//hide the container, be sure to leave the container out of the flow of the document, otherwise it may obscure the lower page information});functionHIDEBG () {//Hide containers (including small squares)$ ("#container"). Hide (); }

The last of this hidden container, if directly with the JQ in the hide immediately executed, the disintegration of the animation is too late to play the Display:none effective.

So I chose to use settimeout to have the Hide () function delay until the diffuse disintegration animation executes.

This is both animated, and the blocks are drawn out of the flow of the document, used for image display, the disintegration of the picture will not block the underlying content.

OK, my this small effect is here ~ Thank you, also thank you in the 4 months of study accompany me, grow up together small partners ~ It seems we have to hang together code! Come on!