Submit your widget

wobble slideshow effect with jQuery

Created 4 years ago   Views 17209   downloads 3515    Author tympanus
wobble slideshow effect with jQuery
View DemoDownload 105.5 KB
65
Share |

The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.The slides in this slideshow wobble as they move. 

This is an experimental slideshow effect .The markup of the slideshow is a unordered list wrapped by a division:

<div id="slideshow" class="slideshow">
    <ul>
        <li>
            <div class="slide">
                <!-- ... -->
            </div>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div>

What we do is to insert an SVG before the slide with a path that is a rectangle. The SVG looks as follows after being inserted:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
    <path d="M33,0C33,0,74,0,74,0C74,0,69,9.871,69,29.871C69,49.871,74,60,74,60C74,60,32.666,60,32.666,60C32.666,60,32.541,60,32.541,60C32.541,60,6,60,6,60C6,60,1,50,1,30C1,10,6,0,6,0C6,0,33,0,33,0" />
</svg>

Read more:http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/

Tag: slideshow