Configurable Sliding Overlay Plugin With jQuery - boxSlider
File Size: | 7.72 KB |
---|---|
Views Total: | 2690 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The boxSlider jQuery plugin makes use of CSS3 transitions to create a configurable sliding overlay effect over a given container on cursor hover.
How to use it:
1. To use this plugin, add the following JavaScript and CSS files to the html file.
<link rel="stylesheet" href="css/boxSlider.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="js/boxSlider.js"></script>
2. Apply the sliding overlay to the element you specify.
// left to right // Background color: yellow // Button text: Click Me $(".element").leftSlideDefault("yellow", "Click Me"); // Up to down // Background color: blue // Button text: Read More $(".element").downSlideDefault("blue", "Read More"); // Right to left // Background color: yellow // Button text: Click Me $(".element").rightSlideDefault("yellow", "Click Me"); // Down to up // Background color: blue // Button text: Read More $(".element").upSlideDefault("blue", "Read More");
This awesome jQuery plugin is developed by haidarhmd1. For more Advanced Usages, please check the demo page or visit the official website.