andrews word CSS3 Carousel

andrews word CSS3 Carousel

HTML

<div class="container-fluid">
  <h1>Typographic CSS anims</h1>
  <p>Using CSS3 to do what I used to do with JS</p>
  <div class="row panel">
      
      <div id="hp-top-notice" class="text-center">
     <h1> Belvilla <div class="divider-vertical "></div>
    <span class="cd-words-wrapper slide-effect"> 
 <span class="menu-item is-visible">Design</span>
        <span class="menu-item">UI/UX</span>
 <span class="menu-item">Front End Dev</span>
 <span class="menu-item">Brand</span>
 <span class="menu-item">App Design</span>
 <span class="menu-item">Project Management</span>
 <span class="menu-item">Artwork</span>
 <span class="menu-item">Analyst</span>
 <span class="menu-item">Digital</span>
</span>
     </h1>

</div>
        </div>
<hr class="divider">

    <div class="row">
        <div class="lead col-xs-12 col-md-4 text-center">Test copy content copy content copy content copy content copy content copy content copy content</div>
        <div class="col-xs-12 col-md-4 text-center">Test copy content copy content copy content copy content copy content copy content copy content copy content copy content copy content copy content copy content</div>
        <div class="col-xs-12 col-md-4 text-center">Test copy content copy content copy content copy content copy content copy content copy content</div>
    </div>

    
  
      </div>

CSS

@import"http://fonts.googleapis.com/css?family=Tenor+Sans";
 body {
    font:12px/1.6'Tenor Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust:100%;
    background: #f5f5ef
}
.divider-vertical {
    height: 40px;
    margin: 0px 9px;
    display:inline-block;
    border-left: 1px solid rgba(233, 233, 233, 0.7);
    border-right: 1px solid rgba(233, 233, 233, 0.7);
}
#hp-top-notice {
    width:560px;
    white-space:nowrap;
    margin:0 auto;
    color:#fff;
    position:relative;
    z-index:2;
    letter-spacing:-1px;
}
#hp-top-notice h1 {
    color:#222222;
    font-size:43px;
    font-weight:700;
    text-shadow:1px 1px 3px rgba(0, 0, 0, 0.3)
}
.cd-words-wrapper {
    vertical-align:top;
    position:relative;
    text-align:left;
    display:inline-block;
    width:300px;
    height:1.5em;
    padding:.2em 0
}
.cd-words-wrapper.slide-effect {
    overflow:hidden
}
.cd-words-wrapper .menu-item {
    display:inline-block;
    position:absolute;
    white-space:nowrap;
    font-size:14px;
    line-height:45px;
    text-transform:uppercase;
     letter-spacing:4px;
    color:#fff;
     text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
    /*font-size:50%;*/
    left:0;
    top:0;
    opacity:0
}
.menu-item.is-visible {
    z-index:2
}
.slide-effect .menu-item.is-visible {
    top:0;
    opacity:1;
    -webkit-animation:slide-in .6s;
    -moz-animation:slide-in .6s;
    animation:slide-in .6s
}
.slide-effect .menu-item.is-hidden {
    -webkit-animation:slide-out .6s;
    -moz-animation:slide-out .6s;
    animation:slide-out .6s
}
@-webkit-keyframes slide-in {
    0% {
        opacity:0;
        -webkit-transform:translateY(-100%)
    }
    60% {
        opacity:1;
        -webkit-transform:translateY(20%)
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0)
    }
}
@-moz-keyframes slide-in {
    0% {
        opacity:0;
        -moz-transform:translateY(-100%)
    }
    60% {
 ...

JavaScript

// andrewpougher.co.uk - (c) test scripting:

function initAPEffects() {
    if (!jQuery('#hp-top-notice').attr('id')) return;
    var animationDelay = 2500;
    animateHeadline($('#hp-top-notice'));

    function animateHeadline($headlines) {
        $headlines.each(function () {
            var headline = $(this);
            //trigger animation
            setTimeout(function () {
                hideWord(headline.find('.is-visible'))
            }, animationDelay);
            //other checks here ...
        });
    }

    function hideWord($word) {
        var nextWord = takeNext($word);
        switchWord($word, nextWord);
        setTimeout(function () {
            hideWord(nextWord)
        }, animationDelay);
    }

    function takeNext($word) {
        return (!$word.is(':last-child')) ? $word.next() : $word.parent()
            .children().eq(0);
    }

    function switchWord($oldWord, $newWord) {
        $oldWord.removeClass('is-visible').addClass('is-hidden');
        $newWord.removeClass('is-hidden').addClass('is-visible');
    }
}
initAPEffects();