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.

Dependencies:

• pixi.js
• GSAP (TweenMax)

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.

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

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

var images = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg"
]

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
    
});