ENDLESS / jQuery Plugin

About ENDLESS plugin

License

ENDLESS plugin is governed by the CeCILL-C license under French law and abiding by the rules of distribution of free software. You can use, modify and/or redistribute the ENDLESS plugin under the terms of the CeCILL-C license as circulated by CEA, CNRS and INRIA at the following URL: http://www.cecill.info.

Get the source code

The source code of this plugin is hosted as an open source project on GitHub: https://github.com/webcoder31/endless.

Report issues

Any issue should be reported at the following URL: https://github.com/webcoder31/endless/issues.

Contribute

Any contribution is welcome and may be submitted at the following URL: https://github.com/webcoder31/endless/pulls.

About the author

I am Thierry Thiers, a French web developer located in Toulouse. As a consultant, I regularly search for new missions. So, if you find my works awesome and you're looking to hire a good guy, I'm your man! ;)

Best regards

webcoder31@gmail.com

For a full resume, please, review my LinkedIn profile.

Slideshow features

ENDLESS plugin is a reactive slideshow that zooms indefinitely on a set of images. It provides several settings and configurable effects to meet your needs.

By playing on all or part of these features you can, using a few well chosen images and smartly prepared, get a slideshow resembling a video. For example, the slideshow presented in the banner of this page is made from only 25 images! And the result is frankly amazing, right?

Basic options

The plugin provides several basic options that allow to:

Randomize the order of images at the start of the slideshow.
Convert color images into grayscale images.
Set the opacity of superimposition of the images.
Set the location of the vanishing point of the slideshow.
Set the slideshow speed (forward and backward).

Built-in effects

In addition to the previous options, 3 configurable built-in effects are available to:

Vary the speed of the slideshow by means of a periodic function that can be parameterized.
Apply a parallax effect along the X and Y axes which is governed via two distinct parameterizable periodic functions.
Modify the hue of the images by means of a parameterizable function linked to the real time speed of the slideshow.

How to use?

You can bind ENDLESS plugin to any block type element, usualy to a div element. The plugin will then create an underlying canvas in which the slideshow will be executed, allowing you to define a visible content into the block type container that overlay the slideshow. If the container to which you assign the slideshow is resized, the slideshow will also be resized while maintaining the aspect ratio of the images.

Several distinct instances of the plugin may be used in the same page.

Basic example showing all available parameters and hooks with their default values (just cut'n paste and you're done):

<!-- Slideshow placeholder -->
<div id="slideshow">
    <!-- Your content here if any -->
</div>

<!-- Load jQuery library and the ENDLESS plugin -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="endless.min.js"></script>

<!-- Page script -->
<script type="text/javascript">

    $(document).ready(function() {

        // Initialize the slideshow.
        var slideshow = $('#slideshow').endless({

            // Images list (required)
            images: [
                'images/image-01.png',
                'images/image-02.png',
                // ...
                'images/image-xx.png'
            ],

            // Basic parameters
            shuffle: true,
            grayscale: false,
            opacity: 100,
            vpOffsetFactorX: 0,
            vpOffsetFactorY: 0,
            fxCycleDuration: 30,
            speed: 10,

            // Speed FX parameters
            speedFX: true,
            speedFXOffset: 1.20,
            speedFXGain: 0.70,
            speedFXDamping: 1.25,
            speedFXFrequency: 1,
            speedFXPhase: -1.45,

            // Parallax FX parameters
            parallaxFX: true,
            parallaxFXGainX: 0.55,
            parallaxFXFrequencyX: 3,
            parallaxFXPhaseX: -0.75,
            parallaxFXGainY: 0.45,
            parallaxFXFrequencyY: 4,
            parallaxFXPhaseY: 0.35,

            // Hue FX parameters
            hueFX: true,
            hueFXFrequency: 6,

            // Hooks
            loaded: function() {},
            beforeAnimate: function(time, clock) {},
            afterAnimate: function(time, clock, fxValues) {}
        });

        // Start the slideshow.
        slideshow.endless('start');
    });

</script>

Commands

The plugin provides two commands:

start which should be used to start the animation.
stop which should be used to pause the animation.

The following example illustrates how to control the slideshow with a button:

<!-- Slideshow placeholder -->
<div id="slideshow"></div>

<!-- START / STOP button -->
<button id="button">STOP</button>

<!-- Load jQuery library and the ENDLESS plugin -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="endless.min.js"></script>

<!-- Page script -->
<script type="text/javascript">

    $(document).ready(function() {

        // Initialize the slideshow.
        var slideshow = $('#slideshow').endless({
            images: [
                // ...
            ]
        });

        // Start the slideshow automaticaly.
        slideshow.endless('start');

        // Start / stop the slideshow on button click.
        $('#button').click(function() {
            if($(this).html() == 'STOP') {
                slideshow.endless('stop');
                $(this).html('START');
            }
            else {
                slideshow.endless('start');
                $(this).html('STOP');
            }
        });
    });

</script>

Hooks

ENDLESS plugin offers 3 hooks that must be assigned callback functions to let you interacts whith the slideshow:

loaded which is triggered when all images are loaded. So you can, for exemple, easily control a spinner for a perfect user experience.
beforeAnimate which is triggered before each step of the animation.
The callback function which is assigned to this hook receive 2 values as arguments when called:
- time which is the time elapsed since the slideshow has started in milliseconds.
- clock which is the elapsed time converted to cyclic value from -π to +π. The duration of the cycle is defined by the parameter fxCycleDuration.
afterAnimate which is triggered after each step of the animation.
The callback function which is assigned to this hook receive 3 values as arguments when called:
- time which is the time elapsed since the slideshow has started in milliseconds.
- clock which is the elapsed time converted to cyclic value from -π to +π. The duration of the cycle is defined by the parameter fxCycleDuration.
- fxValues which is an object containing the values computed during the animation step.
  These are the following:
  - speed which is the current speed.
  - parallaxOffsetX which is the current parallax offset (in pixels) on the X axis from the vanishing point.
  - parallaxOffsetY which is the current parallax offset (in pixels) on the Y axis from the vanishing point.
  - hue which is the current hue value in degrees.

Callback functions assigned to the hooks do not need to return value.

The following sample shows how to use the afterAnimate hook to stop the slideshow after 15 seconds:

var slideshow = $('#slideshow').endless({
    images: [
        // ...
    ],
    afterAnimate: function(time, clock, fxValues) {
        if(time > 15000) {
            slideshow.endless('stop');
        }
    }
});

slideshow.endless('start');

Plugin settings

ENDLESS plugin has two kinds of parameters:

Static parameters that are read once at plugin initialisation time. These are the images and the shuffle parameters.
Runtime parameters that are read/evaluated at each tick of the animation after the slideshow has started. These are all remaining parameters.

Both can be passed either as normal options (ie. numbers, strings, booleans, etc.) for a static configuration or as callback functions to control the slideshow in real time.

The callback functions receive 2 values as arguments when called:

time which is the time elapsed since the slideshow has started in milliseconds.
clock which is the elapsed time converted to cyclic value from -π to +π. The duration of the cycle is defined by the parameter fxCycleDuration.

Provided option values are sanitized by the plugin. For example, if you provide a value which is out of the accepeted range, it will be rounded to the nearest valid value.

The following example illustrate how to control the opacity parameter with a callback function:

$('#slideshow').endless({
    images: [
        // ...
    ],
    opacity: function(time, clock) {
        return 60 + 40 * Math.sin(4 * clock);
    }
});

Basic parameters

These parameters let you set the basic options of the slideshow.

images parameter (required)

List of images that compose the slideshow. To obtain a smooth effect, you should at least use dozen of images. If you do not have enough images, you can specify some images twice or more in the list.

Can be relative or absolute URL.

Type	Range	Default
`array`	`N.A.`	`N.A.`

shuffle parameter

Shuffle the order of images before launching the slideshow.

Type	Range	Default
`boolean`	`false / true`	`true`

opacity parameter

Images superimposition opacity.

Type	Range	Default
`number`	`0 / 100`	`100`

grayscale parameter

Converts images into grayscale.

Type	Range	Default
`boolean`	`false / true`	`false`

vpOffsetFactorX parameter

Percentage offset of the X-coordinate of the vanishing point from the center of the slideshow.

IMPORTANT: If the parallax effect is activated, the absolute value of this parameter defines the maximum variation of the X-coordinate of the vanishing point (negative or positive). Therefore, the value 0 inhibits the parallax effect on the X axis.

Type	Range	Default
`number`	`-100 / +100`	`50`

vpOffsetFactorY parameter

Percentage offset of the Y-coordinate of the vanishing point from the center of the slideshow.

IMPORTANT: If the parallax effect is activated, the absolute value of this parameter defines the maximum variation of the Y-coordinate of the vanishing point (negative or positive). Therefore, the value 0 inhibits the parallax effect on the Y axis.

Type	Range	Default
`number`	`-100 / +100`	`50`

fxCycleDuration parameter

This define the base duration (in seconds) used to convert elapsed time since the slideshow has started to a cyclic value comprised between -π and +π.

Built-in effects use this value as the base time to generate speed variation, parallax effect and images hue rotation.

Type	Range	Default
`number`	`1 / 60`	`30`

speed parameter

This parameter defines the slideshow speed. This is the rate at which the slideshow zooms or de-zooms in the images that it superimposes successively on top of each other. Note that it's a relative value, without real unit.

A negative value make the slideshow going backward.

Type	Range	Default
`number`	`-100 / +100`	`10`

Speed variation effect

This effect controls dynamicaly the rate at which the slide show zooms or de-zooms in the images that it superimposes successively on top of each other.

The speed variation effect is governed by the following periodic function:

s = ns * (O + G * sin(t * 1/2 * F + P + D * cos(t * 2 * F)))

Where:

t is the elapsed time converted to a cyclic value from -π to +π (see the fxCycleDuration parameter).
s is the variegated speed for the current elapsed time.
ns is the nominal speed of the slideshow (see the speed parameter).
O is a positive or negative offset allowing to shift up or down the speed variation (see the speedFXOffset parameter).
G is the gain (attenuation) of the speed variation effect (see the speedFXGain parameter).
D is the gain of the damping of the speed variation effect (see the speedFXDamping parameter).
F is the frequency of the speed variation effect (see the speedFXFrequency parameter).
P is the phase shift of the speed variation effect (see the speedFXPhase parameter).

speedFX parameter

Enable speed variation effect.

Type	Range	Default
`boolean`	`false / true`	`true`

speedFXOffset parameter

Offset of the speed variation effect.

Type	Range	Default
`number`	`-2.00 / +2.00`	`1.20`

speedFXGain parameter

Gain (attenuation) of the speed variation effect.

Type	Range	Default
`number`	`0.00 / 1.00`	`0.70`

speedFXDamping parameter

Gain of the damping of the speed variation effect.

The value 0 inhibits the damping.

Type	Range	Default
`number`	`-2.00 / +2.00`	`1.25`

speedFXFrequency parameter

Frequency of the speed variation effect compared to one cycle of the built-in effects (see the fxCycleDuration parameter).

Type	Range	Default
`number`	`0 / 10`	`1`

speedFXPhase parameter

Phase shift of the speed variation effect.

Type	Range	Default
`number`	`-π / +π`	`-1.45`

Parallax effect

This effect controls the shifting of the slideshow images on the X and Y axes while continuously zooming in or out. Combined with the speed variation effect, this produces a parallax effect enhanced by a variable depth of field which makes the slideshow look almost like a video.

The parallax effect is governed by two periodic functions controling the moving of the vanishing point on the two axes from the center of the slideshow:

x = sw/2 * GX * sin(t * FX + PX)

Where:

t is the elapsed time converted to a cyclic value from -π to +π (see the fxCycleDuration parameter).
x is the variegated delta (from the slideshow center) on the X axis for the current elapsed time.
sw is the width of the slideshow.
GX is the gain (attenuation) of the parallax effect on the X axis (see the parallaxFXGainX parameter).
FX is the frequency of the moving on the X axis (see the parallaxFXFrequencyX parameter).
PX is the phase shift of the moving on the X axis (see the parallaxFXPhaseX parameter).

y = sh/2 * GY * cos(t * FY + PY)

Where:

t is the elapsed time converted to a cyclic value from -π to +π (see the fxCycleDuration parameter).
y is the variegated delta (from the slideshow center) on the Y axis for the current elapsed time.
sh is the height of the slideshow.
GY is the gain (attenuation) of parallax effect on the Y axis (see the parallaxFXGainY parameter).
FY is the frequency of the moving on the Y axis (see the parallaxFXFrequencyY parameter).
PY is the phase shift of the moving on the Y axis (see the parallaxFXPhaseY parameter).

parallaxFX parameter

Enable parallax effect.

Type	Range	Default
`boolean`	`false / true`	`true`

parallaxFXGainX parameter

Gain (attenuation) of the X axis parallax effect.

Type	Range	Default
`number`	`0.00 / 1.00`	`0.55`

parallaxFXFrequencyX parameter

Frequency of the X axis parallax effect compared to one cycle of the built-in effects (see the fxCycleDuration parameter).

Type	Range	Default
`number`	`0 / 10`	`3`

parallaxFXPhaseX parameter

Phase shift of the parallax effect on the X axis.

Type	Range	Default
`number`	`-π / +π`	`-0.75`

parallaxFXGainY parameter

Gain (attenuation) of the Y axis parallax effect.

Type	Range	Default
`number`	`0.00 / 1.00`	`0.45`

parallaxFXFrequencyY parameter

Frequency of the Y axis parallax effect compared to one cycle of the built-in effects (see the fxCycleDuration parameter).

Type	Range	Default
`number`	`0 / 10`	`4`

parallaxFXPhaseY parameter

Phase shift of the parallax effect on the Y axis.

Type	Range	Default
`number`	`-π / +π`	`0.35`

Opacity variation effect

This effect cyclically modify the opacity of images of slideshow. It is dynamicaly weighted by the real time speed of the slideshow.

opacityFX parameter

Enable opacity variation effect.

Type	Range	Default
`boolean`	`false / true`	`true`

opacityFXFrequency parameter

Frequency of the opacity effect compared to one cycle of the built-in effects (see the fxCycleDuration parameter).

Type	Range	Default
`number`	`0 / 10`	`6`

Hue variation effect

This effect cyclically modify the hue of images of slideshow. It is dynamicaly weighted by the real time speed of the slideshow.

hueFX parameter

Enable hue variation effect.

Type	Range	Default
`boolean`	`false / true`	`true`

hueFXFrequency parameter

Frequency of the hue effect compared to one cycle of the built-in effects (see the fxCycleDuration parameter).

Type	Range	Default
`number`	`0 / 10`	`6`

Images

You can use and mix any type of images supported by web browsers, no matter they have different formats and dimensions. Path to an image may be either a relative URL to a local asset or a full external URL.

Once loaded, a transform matrix is applyed to images, making their edges blured and faded to transparent color in order to achieve the following effect.

How images are pre-processed before being used by Endless slideshow:

Original image

Transform matrix

Processed image

Onto another one

Propulsed by UIkit, jQuery, JSXGraph, highlight.js, jsSocials and Font Awesome

Available soon...

Share ENDLESS plugin!

ENDLESS / jQuery Plugin A stunning slideshow with infinite zoom and parallax effect

About ENDLESS plugin

License

Get the source code

Report issues

Contribute

About the author

Slideshow features

Basic options

Built-in effects

How to use?

Commands

Hooks

Plugin settings

Basic parameters

images parameter (required)

shuffle parameter

opacity parameter

grayscale parameter

vpOffsetFactorX parameter

vpOffsetFactorY parameter

fxCycleDuration parameter

speed parameter

Speed variation effect

speedFX parameter

speedFXOffset parameter

speedFXGain parameter

speedFXDamping parameter

speedFXFrequency parameter

speedFXPhase parameter

Parallax effect

parallaxFX parameter

parallaxFXGainX parameter

parallaxFXFrequencyX parameter

parallaxFXPhaseX parameter

parallaxFXGainY parameter

parallaxFXFrequencyY parameter

parallaxFXPhaseY parameter

Opacity variation effect

opacityFX parameter

opacityFXFrequency parameter

Hue variation effect

hueFX parameter

hueFXFrequency parameter

Images