Acid Trip is a lightweight jQuery plugin for adding interactive and dynamic CSS gradient transitions to the background that responds to mouse movement.
Must Read: Highlight jQuery URL ColorUP In Textareas Like On Twitter | urlcolorup
How to make use of it:
1. Load the jQuery library and jQuery acid trip
plugin.
<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 in a container where you apply gradient transitions to it.
$('.acid').acid();
4. Full plugin options with default settings.
// 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
See Demo And Download
Official Website(wadehammes): Click Here
This superior jQuery/javascript plugin is developed by wadehammes. For extra advanced usage, please go to the official website.