JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<div id="hero">
<h1>
            Dijital Mamuller sizin için markanızı
            <span id="hero-word-switcher" style="width: 120px;" class="in">
                <strong class="active" data-oid="0" data-width="120px">yeni müşterilere ulaştırır</strong>
                <strong data-oid="1" data-width="84" class="">marka değerini arttırır</strong>
                <strong data-oid="2" data-width="183" class="">monitor</strong></span>
            <!-- apps. --> .
        </h1>
  
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext);

#hero{background:#2c3e50 url('http://xamarin.com/content/images/pages/index/hero.jpg') center;background-size:cover;height:500px;box-sizing:border-box;-ms-box-sizing:border-box;margin:0;overflow:hidden;position:relative;z-index:100; }

#hero h1{font-size:1.8em; color:#fff; text-align:left;margin-top:120px;margin-bottom:120px;text-
    shadow:0 3px 6px rgba(0,0,0,.2); font-weight:300;  font-family: 'Oswald', sans-serif;}

#hero h1 strong{font-weight:400; font-family: 'Oswald', sans-serif;}

#hero .logo-stripe img{display:block;max-width:100%;height:auto;-webkit-filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}


#hero-word-switcher{position:relative;display:inline-block;vertical-align:top;transition:width 400ms cubic-bezier(.215,.61,.355,1);white-space:nowrap;margin-right:-5px}

#hero-word-switcher.in strong{-webkit-animation:leave-word 300ms cubic-bezier(.215,.61,.355,1);-moz-animation:leave-word 300ms cubic-bezier(.215,.61,.355,1);-webkit-transform-origin:center 35px;transform-origin:center 35px}
@-webkit-keyframes leave-word{0%{-webkit-transform:rotateX(0deg);visibility:visible;opacity:1}
100%{-webkit-transform:rotateX(-90deg);visibility:visible;opacity:0}
}
@keyframes leave-word{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);visibility:visible;opacity:1}
100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);visibility:visible;opacity:0}
}
#hero-word-switcher.in strong.active{-webkit-animation:enter-word 300ms 100ms cubic-bezier(.215,.61,.355,1);animation:enter-word 300ms 100ms cubic-bezier(.215,.61,.355,1)}
@-webkit-keyframes enter-word{0%{-webkit-transform:rotateX(90deg);opacity:0}
100%{opacity:1;-webkit-transform:rotateX(0deg)}
}
@keyframes...

JavaScript

$(function() {

    // Hero word switcher

    var switcher = $('#hero-word-switcher');
    var delay = 3000;
    var count = switcher.find('strong').length;

    function calculateWidths() {
        switcher.find('strong').each(function(index) {
            $(this).attr('data-width', $(this).width());
        });
        switcher.width(switcher.find('.active').attr('data-width'));
    }
    calculateWidths();

    $(window).resize(function() {
        calculateWidths();
    });

    function doChange() {
        var nextItem;
        var currentItem = parseInt(switcher.find('.active').attr('data-oid'));

        if (currentItem == count - 1) {
            nextItem = 0;
        } else {
            nextItem = currentItem + 1;
        }

        switcher.addClass('in');

        switcher.find('[data-oid="' + currentItem + '"]').removeClass('active');
        switcher.find('[data-oid="' + nextItem + '"]').addClass('active');

        switcher.width(switcher.find('[data-oid="' + nextItem + '"]').attr('data-width'));
        setTimeout(doChange, delay);
    }

    setTimeout(doChange, delay);

});