Dynamic Image Slider With Glitch Effect – rgbShiftSlider

Category: Javascript , Recommended , Slider | September 24, 2019
Views Total:2,390 views
Official Page:Go to website
Last Update:September 24, 2019


Dynamic Image Slider With Glitch Effect – rgbShiftSlider


A dynamic, responsive, interactive, fullscreen image slider that comes with a fancy split color (rgba) glitch effect when moving the cursor and transitioning between images.


How to use it:

1. Load the needed JavaScript libraries in the html file.

<script src="/path/to/pixi.min.js"></script>
<script src="/path/to/TweenMax.min.js"></script>

2. Download and load the rgbShiftSlider.js library in the html.

<script src="js/rgbShiftSlider.js"></script>

3. Build the HTML for the slider.

<div id="rbgShiftSlider" class="rgbShiftSlider"></div>

4. Create navigation buttons to switch between images.

  <a href="#" class="scene-nav prev" data-nav="previous">Prev</a>
  <a href="#" class="scene-nav next" data-nav="next">Next</a>

5. Define an array of images to be showcased in the slider.

var images = [

6. Initialize the library and config the slider with the following parameters:

var rbgShiftSlider = new rbgShiftSlider({
    // enable nav buttons
    nav : true,
    navElement: '.scene-nav',
    // image array
    slideImages: images,
    // sldier size
    stageWidth: 1920,
    stageHeight: 1080,
    // displacement image
    displacementImage: 'assets/displace-circle.png',
    // fullscreen mode
    fullScreen: true,
    // animation options
    transitionDuration: 0.35, // must be 0.1 > transitionGhostDuration
    transitionGhostDuration : 0.25,
    transitionFilterIntensity: 350,
    transitionSpriteIntensity: 2,
    // mouse interactions
    mouseDispIntensity: 3,
    interactive : true,
    // enable autoplay
    autoPlay : true,
    autoPlaySpeed : 5000

You Might Be Interested In:

Leave a Reply