Crossfade CSS Generator

crossfadeCSSGenerator.js

var CrossfadeCSSGenerator = function (opts) {
    'use strict';

    this.opts = opts;
    this.animationDuration = this.getAnimationDuration(this.opts.imageShownDuration, this.opts.crossfadeDuration, this.opts.numberOfImages);
    this.animationDelay = this.getAnimationDelay(this.opts.imageShownDuration, this.opts.crossfadeDuration);

    this.init();
};

CrossfadeCSSGenerator.prototype.init = function () {
    'use strict';

    console.log(this.getAnimationStyles(this.animationDuration, this.animationDelay, this.opts.numberOfImages, this.opts.animationName, this.opts.animationSelector));
    console.log(this.getKeyframeAnimation(this.opts.animationName, this.opts.imageShownDuration, this.opts.crossfadeDuration, this.animationDuration));
};

CrossfadeCSSGenerator.prototype.getAnimationDuration = function (imageShownDuration, crossfadeDuration, numberOfImages) {
    'use strict';

    return (imageShownDuration + crossfadeDuration) * numberOfImages;
};

CrossfadeCSSGenerator.prototype.getAnimationDelay = function (imageShownDuration, crossfadeDuration) {
    'use strict';

    return imageShownDuration + crossfadeDuration;
};

CrossfadeCSSGenerator.prototype.getKeyframeAnimation = function (animationName, imageShownDuration, crossfadeDuration, animationDuration) {
    'use strict';

    var keyframe = [
        '@keyframes ' + animationName + ' {',
        '    0% {',
        '        opacity: 1;',
        '    }',
        '    ' + imageShownDuration / animationDuration * 100 + '% {',
        '        opacity: 1;',
        '    }',
        '    ' + (imageShownDuration + crossfadeDuration) / animationDuration * 100 + '% {',
        '        opacity: 0;',
        '    }',
        '    ' + (100 - (crossfadeDuration / animationDuration * 100)) + '% {',
        '        opacity: 0;',
        '    }',
        '    100% {',
        '        opacity: 1;',
        '    }',
        '}'
    ];

    return keyframe.join('\n');
};

CrossfadeCSSGenerator.prototype.getAnimationStyles = function (animationDuration, animationDelay, numberOfImages, animationName, animationSelector) {
    'use strict';

    var styles = [
        animationSelector + ' {',
        '    animation: ' + animationName + ' ' + animationDuration + 's infinite;',
        '}'
    ];

    for (var i = 0; i < numberOfImages; i++) {

        styles.push(animationSelector + ':nth-of-type(' + (numberOfImages - i) + ') {');
        styles.push('    animation-delay: ' + (i * animationDelay) + 's;');
        styles.push('}');
    }

    return styles.join('\n');
};

var crossfadeCSSGenerator = new CrossfadeCSSGenerator({
    'numberOfImages': 4,
    'imageShownDuration': 5,
    'crossfadeDuration': 0.5,
    'animationName': 'crossfade',
    'animationSelector': '.images'
});