Based on HTML5 svg and CSS3 cool trampoline image switching effects

Today to share a very cool effect of HTML5 svg and CSS3 trampoline image switch effect plug-in. The picture switch plugin in the picture switch, the whole screen is like a big trampoline, the picture ejection, switch to another picture, the effect is very creative. As follows:

Online preview Source Download

HTML structure

In the HTML structure of the image toggle effect, the first element is an SVG graphic, which changes from a regular rectangle to a compressed rectangle when the picture is switched.

<Divclass= "Stack">  <ulID= "Elasticstack"class= "Stack__images">    <Li><imgsrc= "Img/1.jpg"alt= "On"/></Li>    <Li><imgsrc= "Img/2.png"alt= "The "/></Li>    <Li><imgsrc= "Img/3.jpg"alt= "OK"/></Li>    <Li><imgsrc= "Img/4.jpg"alt= "" "/></Li>    <Li><imgsrc= "Img/5.png"alt= "to"/></Li>    <Li><imgsrc= "Img/6.png"alt= " "/></Li>  </ul>  <ButtonID= "Stack-next"class= "Stack__next"><Iclass= "icon Icon-down"></I><span>Next</span></Button>  <ulID= "Stack-titles"class= "Stack__titles">    <Liclass= "Current">      <blockquote>        <P>"Once you had eliminated the impossible, whatever remains, however improbable, must be the truth."</P>        <Footer><ahref="#">#RIPLeonardNimoy</a>by James Olstein</Footer>      </blockquote>    </Li>    <Li>      <blockquote>        <P>"The needs of the many outweigh the needs of the few, or the one."</P>        <Footer><ahref="#">Mr. Spock</a>by Mustafa Kural</Footer>      </blockquote>    </Li>    <Li>      <blockquote>        <P>"Insufficient facts always invite danger."</P>        <Footer><ahref="#">Llap</a>by Sarah McKay</Footer>      </blockquote>    </Li>    <Li>      <blockquote>        <P>"Without followers, evil cannot spread."</P>        <Footer><ahref="#">RIP Leonard Nimoy</a>by Derric</Footer>      </blockquote>    </Li>    <Li>      <blockquote>        <P>"Logic is the beginning of wisdom, not the end."</P>        <Footer><ahref="#">#Goodnight, Spock</a>by Helen Tseng</Footer>      </blockquote>    </Li>    <Li>      <blockquote>        <P>"Change was the essential process of all existence."</P>        <Footer><ahref="#">RIP Spock</a>by Sahirul Iman</Footer>      </blockquote>    </Li>  </ul></Div><!--/stack - 

via:http://www.w2bc.com/article/27451

Based on HTML5 svg and CSS3 cool trampoline image switching effects