Canvas Based Slice Slideshow With jQuery And GSAP
File Size: | 5.7 KB |
---|---|
Views Total: | 3648 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, fancy jQuery slideshow plugin that uses HTML5 canvas
element and GSAP's TweenMax library to create a slice animation when transitioning between images.
How to use it:
1. Create the slice slideshow from a normal HTML unordered list as this:
<ul id="banner"> <li> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> ... </ul>
2. Include the needed jQuery library and GSAP's TweenMax library on the webpage.
<script src="jquery-3.1.1.slim.min.js"></script> <script src="TweenMax.min.js"></script>
3. Include the main JavaScript file after jQuery library.
<script src="main.js"></script>
4. The required CSS styles for the slice slideshow.
ul#banner { position: relative; width: 800px; height: 500px; overflow: hidden; margin: 0 auto; } ul#banner li { position: absolute; top: 0; left: 0; display: none; } ul#banner li img { visibility: hidden; } ul#banner li canvas { position: absolute; top: 0; left: 0; }
This awesome jQuery plugin is developed by thomas057. For more Advanced Usages, please check the demo page or visit the official website.