Creating Interactive Gradient Background with jQuery - Acid Trip
File Size: | 9.2 KB |
---|---|
Views Total: | 2393 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Acid Trip is a lightweight jQuery plugin for adding interactive, animated, CSS gradient transitions to your background that responds to mouse movement.
See Also:
How to use it:
1. Load jQuery library and the jQuery acid trip plugin at the bottom of the document so the page loads faster.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/js/acid.min.js"></script>
2. Add the required styles to your CSS file.
.acid .trip { background: 0 0; height: 250%; height: 250vh; margin-left: -150%; margin-top: -180%; transition: opacity 2s cubic-bezier(.55, .46, .15, .99); width: 250%; width: 250vw; z-index: 1 }
3. Call the function on a container where you apply the gradient transitions to.
$('.acid').acid();
4. Full plugin options with defaults.
// target elements element : 'acid', gradient : 'trip', // the size of the gradient ratio : 2.15, // class that applies the transition effect activeClass : 'on', // z-index of the gradient elementZ : 1, // set to true if you want to use your own gradient in your css overrideJSGradient: false
This awesome jQuery plugin is developed by wadehammes. For more Advanced Usages, please check the demo page or visit the official website.