Press "Enter" to skip to content

jQuery Plugin That Creates A Gradient Of The Background | Acid-Trip

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *