A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

Related tags

Effect gl-slideshow
Overview

gl-slideshow

An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power.

Latest NPM release

Shaders are forked from https://gl-transitions.com/

Working Examples

Usage

$ npm install --save GLSlideshow

then

import GLSlideshow from 'GLSlideshow';

Traditional way in web browser

Copy GLSlideshow.js from /dist/gl-slideshow.js and place it in your project. Then, Load the js file in your HTML

<script src="./path/to/gl-slideshow.js"></script>

Make a GLSlideshow instance

<canvas id="myCanvas"></canvas>

<script>
const slideshow = new GLSlideshow(
	[ './img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg' ],
	{
		canvas: document.getElementById( 'myCanvas' ), // optional
		width: 1024,        // optional
		height: 576,        // optional
		duration: 1000,     // optional
		interval: 5000,     // optional
		effect: 'crossZoom' // optional
	}
);
</script>

Constructor and Options

new GLSlideshow( images, options );

images (required)

An array consists of HTMLImageElements or strings for path to image.
Images must be hosted on the same domain or arrowed CORS.

Options

key type value
canvas HTMLCanvasElement The canvas element
width number width in pixels
height number height in pixels
imageAspect number aspect ratio of the image (assume all images are the same aspect ratio)
duration number duration time in milliseconds
interval number interval time in milliseconds
effect string name of effect *1

*1 Effect option currently takes following strings

  • 'crossFade'
  • 'crossZoom'
  • 'directionalWipe'
  • 'wind'
  • 'ripple'
  • 'pageCurl'

APIs

After you made an instance, you can control using the following methods.
For more detail, see APIs example

  • instance.pause()
  • instance.play()
  • instance.setSize( width, height )
  • instance.insert( image, order )
  • instance.remove( order )
  • instance.replace( images )
  • instance.to( to )
  • instance.setEffect( effectName [, uniforms ] )
  • instance.destroy()

Editable params

  • instance.duration
  • instance.interval

Read only params

  • instance.domElement
  • instance.inTransition
  • instance.length
  • instance.currentIndex
  • instance.prevIndex
  • instance.nextIndex

Events

  • instance.addEventListener( 'transitionStart', () => { /* callback */ } );
  • instance.addEventListener( 'transitionEnd', () => { /* callback */ } );

Static methods

  • GLSlideshow.addShader( 'shaderName', shaderSource, uniforms )
Comments
  • Shader example

    Shader example

    Hi! I'm trying to make my own transition effect. So I checked out the shader.html I noticed it makes no difference what value I write in the variabel 'uniforms' for the smoothness. It always has sharp edges.

    const uniforms = {
    	smoothness: { value: 1,  type: 'float' }
    };
    

    So I went to https://gl-transitions.com/editor/ and pasted in the code there. In the editor it works as expected with smooth edges.

    Am I doing something wrong?

    Really like the slider by the way. Good job!

    Best, Niklas

    opened by WideCircle 6
  • My own

    My own "displacementMap" Image

    opened by cimt 5
  • Adding different effects to each Image

    Adding different effects to each Image

    I am new to gl-transitions.May I know how to add different effects to each image like cross fade for 1st image,directional wipe for second and so on .Thank You

    opened by siva123kumar 3
  • Adding new GLSL transitions

    Adding new GLSL transitions

    I am trying to add a new GLSL transition from https://gl-transitions.com/ and the format does not seem to match up. I'm rather new to GLSL in general so I am not sure what would need to happen to convert the format there to work with this package or how to fork this & make it work with their new formatting.

    Any help would be appreciated.

    opened by genericandy 3
  • Please help me capturing

    Please help me capturing

    Hi @yomotsu,

    Thanks for the lib.

    Now I want to capture the slide show and save to webm (using MediaRecorder). I've tried and could capture result, but the quality is not as expected.

    Here's the code (copy from basic.html)

    basic2.zip

    Please help me.

    Thank you, Duong Nguyen

    opened by haiduong87 1
  • Feature Request: Ability to scroll through images.

    Feature Request: Ability to scroll through images.

    Hello. Every time I press a key, the screensaver ends. Is it possible to scroll through images using the keyboard? Also, would it be possible to be able to pause the slideshow by pressing the P button or open a directory path for an image by pressing E? The reason I ask is because I'm used to running Random Photo Screensaver on Windows which has these features. Thanks.

    opened by rtevans01 1
  • Video playback and more

    Video playback and more

    Hi!

    I forked your awesome library and started adding some features. This is the first time I'm working with WebGL so its probably not the best code but it works :D

    Stuff that I got working is:

    • Video playback
    • Automatic ratio handling for video and images in crossZoom transition (have only altered that one yet)
    • Start slideshow without images (it only shows transparent pixels then)
    • Transition in to empty slide (by calling transition(-1))

    My code is not great, its more of an experiment. But maybe you can have some use for it?

    Anyway... Great work with your library and it have been fun to start playing around with WebGL.

    // stamp

    opened by stamp 1
  • TODO

    TODO

    • [x] fallback with canvas2d (only crossfade, for IE9 and so)
    • [ ] glDisable(GL_STENCIL_TEST); glDisable(GL_DEPTH_TEST); glDisable(GL_CULL_FACE); glDisable(GL_LIGHTING);
    • [x] documentation
    opened by yomotsu 0
  • Using video clips

    Using video clips

    I have been trying to get video to load into the canvas along with images. I almost have it, while the video frame displays i am not getting all frames to draw. I have triggered the video object to play and was trying a redraw in tick but it only plays video frames during the transition and then stops.

    I bet i could figure it out with more time but i am kind of in a crunch to show some progress. Any pointers on what could be done to achieve videos playing and transitioning with images?

    opened by LRV 1
  • How to use responsive images for slide show

    How to use responsive images for slide show

    Hy there

    Thanks for this easy to use gl-slider and it's amazing. The problem is how I can use responsive images in these slideshows depending on the screen size.

    Regards Shehzad Asif Front End Web Developer

    opened by ashehzadgec 2
Owner
Akihiro Oyamada
Akihiro Oyamada
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
A sticky image effect for a slideshow inspired by ultanoir's website.

How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on

Daniel Velasquez 198 Nov 18, 2022
A speedy motion transition effect for an image slideshow.

Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits

Codrops 51 Jul 5, 2022
A slideshow that uses a CSS glitch effect for slide transitions.

Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag

Codrops 111 Dec 16, 2022
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Codrops 112 Jul 27, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
sync CSS 3D transformations to a WebGL scene

gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as

null 30 Oct 17, 2022
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 289 Nov 1, 2022
🧞‍♂️ Your magic WebGL carpet

⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) ??‍♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc

Luigi De Rosa 822 Dec 30, 2022
A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Codrops 177 Dec 28, 2022
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
A set of playful dragging effects for images using various techniques.

Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t

Codrops 71 Dec 4, 2022
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 966 Jan 4, 2023
Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Aliaksandr Astashenkau 184 Dec 31, 2022
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 97 Dec 8, 2022