jQuery

【jQuery】テキストにクールなCSS3エフェクトText Switcher

April 12, 2017

Text SwitcherはクールなCSS3テキストエフェクト。

HTML

  <main id="a_content" role="main">

    <div class="text-switcher" data-js="text-switcher">
      <div class="tc__line"><span>Lorem ipsum dolor,</span> <span class="tc__bottom">Provident illo ipsum</span></div>
      <div class="tc__line"><span>sit amet,</span> <span class="tc__bottom">autem laudantium</span></div>
      <div class="tc__line"><span>consectetur adipi</span> <span class="tc__bottom">consectetur quas aut</span></div>
      <div class="tc__line"><span>elit. Obcaecati</span> <span class="tc__bottom">tempora</span></div>
      <div class="tc__line"><span>praesentium.*</span> <span class="tc__bottom">molestiae nam alias</span></div>
    </div>

  </main>

JS

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="assets/js/text-switcher.js"></script>

MIT