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.

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.


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.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…


Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

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