Acid Trip is a lightweight jQuery plugin for adding interactive and dynamic CSS gradient transitions to the background that responds to mouse movement.
moving gradient background, multiple color picker jquery, canvas animate gradient, jquery animation plugins, jquery plugin example
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
creating interactive gradient background, Acid-Trip Plugin/Github
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.
Be First to Comment