Transitions

Transitions

Vegas uses CSS3 transitions, older browsers will display a simple fade transition.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transition: 'fade'
});

• fade
• fade2
• slideLeft
• slideLeft2
• slideRight
• slideRight2
• slideUp
• slideUp2
• slideDown
• slideDown2
• zoomIn
• zoomIn2
• zoomOut
• zoomOut2
• swirlLeft
• swirlLeft2
• swirlRight
• swirlRight2
• burn
• burn2
• blur
• blur2
• flash
• flash2

Two versions are available for each transition. The subtle nuance is a transition is also applied to the disapearing slide too. The transition duration is set in milliseconds by the transitionDuration option.

Random transitions

Transition can be set to random for a randomly picked transition. You can define a list of specific transitions with an array.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transition: [ 'fade', 'zoomOut', 'swirlLeft' ]
});

Custom transitions

You can create your own transitions. A transition has 3 classes. They must be prefixed by .vegas-transition to be recognized..vegas-transition-{name} is the initial state applied when the slide is created..vegas-transition-{name}-in is applied when the slide appears..vegas-transition-{name}-out is applied when the slide disappears.

It's a good practice to provide 2 versions. Below the default fade transition.

.vegas-transition-fade,
.vegas-transition-fade2 {
    opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
    opacity: 1;
}

.vegas-transition-fade2-out {
    opacity: 0;
}

In order to be available in the random mode, new transitions must be added to the transitions list.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    transitionRegister: [ 'myTransition1', 'myTransition2' ]
});

Animations

Vegas uses CSS3 animations, older browsers will ignore them.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animation: 'kenburns'
});

• kenburns
• kenburnsUp
• kenburnsDown
• kenburnsRight
• kenburnsLeft
• kenburnsUpLeft
• kenburnsUpRight
• kenburnsDownLeft
• kenburnsDownRight
• random

The animation duration is set in milliseconds by the animationDuration option.

Random animations

Animation can be set to random for a randomly picked animation. You can define a list of specific animations with an array.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]
});

Custom animations

You can create your own animations. They must be named as .vegas-animation-{name} to be recognized. Below the default kenburns animation (no vendor prefixes).

.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

In order to be available in the random mode, new animations must be added to the animations list.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    animationRegister: [ 'myAnimation1', 'myAnimation2' ]
});