jQuery Plugin That Creates A Gradient Of The Background

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