This time I will share jQuery Plugin and tutorial about Direction-aware Gallery Hover Effect With jQuery – SnakeGallery, hope it will help you in programming stack.
SnakeGallery is a very small jQuery plugin for creating an animated hover overlay for your gallery that slides out from the boundary depending on the direction you enter the image.
How to use it:
1. Load both jQuery library and the jQuery SnakeGallery plugin’s script at the end of the html document:
1 |
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> |
2 |
<script src="snake.min.js"> |
2. Add captions to your gallery images as this:
03 |
<span class="title">Image Title</span> |
04 |
<span class="description">Image Description</span> |
06 |
<img class="" src="1.jpg"> |
11 |
<span class="title">Image Title</span> |
12 |
<span class="description">Image Description</span> |
14 |
<img class="" src="2.jpg"> |
19 |
<span class="title">Image Title</span> |
20 |
<span class="description">Image Description</span> |
22 |
<img class="" src="3.jpg"> |
3. Initialize the plugin with default options.
1 |
$(".snake").snakeify(); |
4. Set the animation speed in milliseconds.
5. Style the hover overlay in the CSS.
06 |
background-color: #ffffff; |
This awesome jQuery plugin is developed by Alexandru-Cambose. For more Advanced Usages, please check the demo page or visit the official website.
