jquery-corniSequence.js

images sequence

Day

<p>Night</p>

<h3>Corni-sequence</h3>

Documentation

Description

This simple script allows small image sequences with a few options.

Compatible with: Chrome, Safari, Opera, Firefox (not all features).


Firefox: important!

The scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the CSS position or transform property.)

These effects work well in browsers where the scrolling is done synchronously on the browser's main thread. However, most browsers now support some sort of asynchronous scrolling in order to provide a consistent 60 frames per second experience to the user. In the asynchronous scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the DOM and fired on the main thread. This means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. This can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid.


Some advices
  • To reduce latency in firefox never use background: true.
  • You can also reduce the size of the images
  • If scroll is activated, you can regulate de property 'scroll.velocidadScroll'
  • In Firefox, the scrolling problem can be solved selecting background: false, and in this case you can add another property: optimization: true. Also this property works in image sequence. Instead of using display: block/none, it uses z-index: 1 / 0

If problems persist you can always filtered by the navigator and put a wallpaper image. :(


Click to unblock

Use

Download the files

Download de .zip file with the script an css code.

corniSequence.zip

First add the style in head section

<head>
    <!-- ... -->
    <link rel="stylesheet" href="css/corniSequence.css">
    <!-- ... -->
</head>                    
                

After, the script. You must use jQuery as a dependency.

Include this files into the your html page, before closing </body>.


    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-corniSequence.js"></script>
</body>

Add images

Now, you need to include your images inside the container. Don't worry about the order. Only will be important to your organization.

Add an id to differentiate from other sequences.

<div class="contenedor-secuencia" id="secuencia1">
    <img src="img/image1.png">
    <img src="img/image2.png">
    <img src="img/image07.png">
    <img src="img/image02.png">
    <!-- ... -->
</div>                
            

Call corniSequence

Always after corniSequence.js

corniSequence($('#secuencia1'), {
    inicio: 0,
    velocidad: 50,
    delay: 100,
    repeat: 0, //'infinite'
    reverse: false,
    drag: false,
    background: false,
    scroll: {
        status: false,
        velocidadScroll: 1,
        indicatorTop: '50%',
        showIndicator: false
    },
    texto: []
})                
            

Options

  • Element

    The object "corniSequence" needs a selector, for exemple: $('#secuencia1')

    You can add more image sequences with new selectors.

    corniSequence($('#secuencia1'), { //put the selector
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: false,
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Start

    "inicio": It refers to the first frame to play.

    Click to unblock

    corniSequence($('#secuencia3'), {
        inicio: 0,
        velocidad: 50, //Total = 52 frames, velocidad = 50 = 0.05sec, fps = (52frames/0.05sec)
        delay: 0,
        repeat: 'infinite', //'infinite'
        reverse: false,
        drag: false,
        background: false,
        scroll: {
            status: false, //No active
            velocidadScroll: 1,
            indicatorTop: '60%',
            showIndicator: true
        }
    });             
                
  • Velocity

    "velocidad": ex: 1000 = 1 sec between frames.

    Normally 20-80 is the right way.

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50, //Normally between 20-80
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: false,
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Delay

    "delay": the time before start the animation.

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100, //time before start
        repeat: 0,
        reverse: false,
        drag: false,
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Repeat

    "repeat": 0, (No repeat)

    A replay: 1

    ...

    'infinite' repeat indefinitely

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 'infinite', //loop infinite times
        reverse: false,
        drag: false,
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Reverse

    "reverse" with true value plays in reverse.

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: true, //plays in reverse when true
        drag: false,
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Drag

    If it is false you need an event like click, hover, etc,... to play.

    When true is selected, a slider appear (in Desktop) so you can drag to play.

    In mobiles, the slider is gone. But swipping over the image will show the sequence. Cool!

    Click to unblock

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: true, //when it's true you swipe the slider or image.
        background: false,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Background

    Do you need load the images in the background?

    Put background property true

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: false,
        background: true, //false load img, true load background image in $('.contenedor-secuencia')
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: []
    })                
                
  • Scroll

    Will activate the image sequence with the scroll

    You can display a timeline to build the scene.

    On scrolling when the indicator reaches the element, will start the animation. Place the indicator in the right place. Use the property showIndicator in true to help


    In Firefox, the scrolling problem can be solved selecting background: false, and in this case you can add another property: optimization: true. Also this property works in image sequence. Instead of using display: block/none, it uses z-index: 1 / 0

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: false,
        background: true,
        optimization: false, //It works with background: false. Very useful scrolling in Firefox.
        scroll: {
            status: true, //true actived, false desativated
            velocidadScroll: 1,
            indicatorTop: '50%', //we place the indicator 50% from the top of the window
            showIndicator: false, //if it's true we can test, showing the reference lines: indicators, borders and number of frames
        },
        texto: []
    })                
                
  • Text

    Do you need to display text?

    First add the container and within the text. The order es important to apply the options from corniSequence()

    <div class="container-text">
        <div class="contenedor-secuencia" id="secuencia2">
            <img src="files/secuencia/desierto/00000.png">
            <img src="files/secuencia/desierto/00001.png">
            <img src="files/secuencia/desierto/00002.png">
            <img src="files/secuencia/desierto/00003.png">
            <img src="files/secuencia/desierto/00004.png">
            <!-- ... -->
        </div>
        <div class="texts"></-- Add this container and within the text -->
            <p>Day</p>
            <p>Night</p>
            <h3 style="font-size: 14px;">Corni-sequence</h3>
        </div>
    </div>
                            

    Now, only you need to put options: start, end, and positions

    corniSequence($('#secuencia1'), {
        inicio: 0,
        velocidad: 50,
        delay: 100,
        repeat: 0,
        reverse: false,
        drag: false,
        background: true,
        scroll: {
            status: false,
            velocidadScroll: 1,
            indicatorTop: '50%',
            showIndicator: false
        },
        texto: [{ //empty array hide text
            start: 20, //Begin in frame number 20
            end: 40, //End in frame number 40
            position: [{ //it will apply to <p>Day</p>
            start: 50,
            end: 130,
                [20, 10],
                [50, 10]
            ], //[top-start, left-start], [top-end, left-end]
        }, { //it will apply to <p>Night</p>
            start: 50,
            end: 130,
            position: [
                [70, 50],
                [30, 50]
            ], //[top-start, left-start], [top-end, left-end]
        }, { //it will apply to <h3">Corni-sequence</h3>
            start: 0,
            end: 130,
            position: [
                [0, 0],
                [0, 110]
            ], //[top-start, left-start], [top-end, left-end]
        }]
    })                
                
  • Video