JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

<div class="language-container">
    <div class="display">Bitte wählen Sie Ihre Sprache</div>
</div>

CSS

.language-container {
    overflow: hidden;
    height: 18px;
}
.display { position: relative; }

JavaScript

;(function($, window, document, undefined) {
    var languages = [
        'Bitte wählen Sie Ihre Sprache',
        'Please select your language',
        'Kies een taal'
    ];
    
    $(function() {
        var $el = $('.display'),
            activeLanguage = 0;
        
        window.setInterval(function() {
            activeLanguage++;
            
            $el.animate({
                top: '-18px',
                opacity: 0
            }, 350, function() {
                if(activeLanguage >= languages.length) {
                    activeLanguage = 0;
                }
                
                $el.html(languages[activeLanguage]);
                $el.css('top', '36px');
                
                window.setTimeout(function() {
                    $el.animate({
                        opacity: 1
                    }, 150);
                }, 25);
                
                $el.animate({
                    'top': '0px'
                }, 350);
            });
            
            
        }, 5000);
    });
})(jQuery, window, document);