Image Slider With Zoom & Shrink Transitions
File Size: | 2.96 KB |
---|---|
Views Total: | 10035 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A small, fancy, fullscreen jQuery/CSS3 slider script that enables next/prev buttons to switch between images with zoom & shrink animations.
Works with modern browsers that support the CSS clip-path property. And fallbacks to a slide animation for legacy browsers.
How to use it:
1. Insert images together with next/prev buttons to the slider.
<div id="main"> <div id="silder"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> ... </div> </div> <div id="prvbtn">←</div> <div id="nxtbtn">→</div>
2. Include the necessary jQuery library on the page.
<script src="/path/to/cdn/jquery.min.js"></script>
3. The main JavaScript for the slider.
$(document).ready(function () { $count = 1; $("#nxtbtn").click(function () { if ($count == 1) { shrink(); $('#silder').delay(1000).animate({ left: "-100%" }, 1000); zoom(); $count = 2; } else if ($count == 2) { shrink(); $('#silder').delay(1000).animate({ left: "-200%" }, 1000); zoom(); $count = 3; } }); $("#prvbtn").click(function () { if ($count == 3) { shrink(); $('#silder').delay(1000).animate({ left: "-100%" }, 1000) zoom(); $count = 2; } else if ($count == 2) { shrink(); $('#silder').delay(1000).animate({ left: "0%" }, 1000) zoom(); $count = 1; } }); function shrink() { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)" }); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)" }); }, 150); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)" }); }, 300); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,10% 80%,90% 80%,90% 20%,10% 20%)", 'clip-path': "polygon(10% 20%,10% 80%,90% 80%,90% 20%,10% 20%)" }); }, 450); } function zoom() { setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)" }); }, 2000); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)" }); }, 2150); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)", 'clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)" }); }, 2300); setTimeout(function () { $('#main').css({ '-webkit-clip-path': "polygon(0% 0%,0% 100%,100% 100%,100% 0%,0% 0%)", 'clip-path': "polygon(0% 0%,0% 100%,100% 100%,100% 0%,0% 0%)" }); }, 2450); } });
4. The primary slider styles.
#main { height: 100vh; width: 100%; position: absolute; -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%); clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%); overflow: hidden; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #silder { width: 300%; /* 3 slides */ position: relative; left: 0; } #silder img { width: 33.33%; float: left; }
5. Style & position the navigation buttons.
#nxtbtn, #prvbtn { height: 35px; width: 35px; background-color: white; font-size: 25px; text-align: center; line-height: 35px; border-radius: 35px; position: fixed; top: 85%; left: 53%; cursor: pointer; font-family: monospace; } #prvbtn { left: 47%; }
This awesome jQuery plugin is developed by ChiangYuChi. For more Advanced Usages, please check the demo page or visit the official website.