Switch special effects based on HTML5 SVG and CSS3 with cool trampoline images,

Switch special effects based on HTML5 SVG and CSS3 with cool trampoline images,

Today we will share with you a very cool HTML5 SVG and CSS3 trampoline-style image switching special effect plug-in. When switching images, the entire screen is like a big trampoline. The picture is shot out and switched to another one, which is very creative. As follows:

Download Online Preview source code

HTML Structure

In the HTML structure of the image switching effect, the first element is the SVG image. When switching an image, it will change from a regular rectangle to a compressed rectangle.

<div class="stack">  <ul id="elasticstack" class="stack__images">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul>  <button id="stack-next" class="stack__next"><i class="icon icon-down"></i><span>Next</span></button>  <ul id="stack-titles" class="stack__titles">    <li class="current">      <blockquote>        <p>"Once you have eliminated the impossible, whatever remains, however improbable, must be the truth."</p>        <footer><a href="#">#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><a href="#">Mr. Spock</a> by Mustafa Kural</footer>      </blockquote>    </li>    <li>      <blockquote>        <p>"Insufficient facts always invite danger."</p>        <footer><a href="#">LLAP</a> by Sarah McKay</footer>      </blockquote>    </li>    <li>      <blockquote>        <p>"Without followers, evil cannot spread."</p>        <footer><a href="#">RIP Leonard Nimoy</a> by derric</footer>      </blockquote>    </li>    <li>      <blockquote>        <p>"Logic is the beginning of wisdom, not the end."</p>        <footer><a href="#">#Goodnight, Spock</a> by Helen Tseng</footer>      </blockquote>    </li>    <li>      <blockquote>        <p>"Change is the essential process of all existence."</p>        <footer><a href="#">RIP Spock</a> by Sahirul Iman</footer>      </blockquote>    </li>  </ul></div><!-- /stack --> 

Via: http://www.w2bc.com/Article/27451