Creating Interactive Gradient Background with jQuery - Acid Trip

Acid Trip is a lightweight jQuery plugin for adding interactive, animated, CSS gradient transitions to your background that responds to mouse movement.

See Also:

• Online CSS Gradient Generator

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.