CROSSCOVERはjQueryとanimation.cssを使用した簡単な背景画像のカルーセル。
デモに掲載されているアニメーションはFADE9、ZOOM4、ROTATE5、FLIP2、LIGHTSPEED1。

CROSSCOVERインストール

<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<!-- crosscover.css -->
<link rel="stylesheet" href="./dist/css/crosscover.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- crosscover.js -->
<script src="./dist/js/crosscover.min.js"></script>

<div class="crosscover">

  <div class="crosscover-overlay">
    <div class="crosscover-island">
      <h1 class="crosscover-title">...</h1>
      <h2 class="crosscover-description">...</h2>
    </div>
  </div>

  <ul class="crosscover-list">
    <li><img src="./images/01.jpg" alt="image01"/></li>
    <li><img src="./images/02.jpg" alt="image02"/></li>
    <li><img src="./images/03.jpg" alt="image03"/></li>
    <li><img src="./images/04.jpg" alt="image04"/></li>
    <li><img src="./images/05.jpg" alt="image05"/></li>
  </ul>
</div>

$(".crosscover").crosscover({
    animateInClass:'fade-in',
    animateOutClass:'fade-out',
    interval : 5000,
    startIndex : 0,
    autoPlay : true,
    controller : true,
    controllerClass  : 'crosscover-controller',
    prevClass : 'crosscover-prev',
    nextClass : 'crosscover-next',
    playerClass : 'crosscover-player',
    playerActiveClass : 'is-playing',
    playerInnerHtml : '<span class="crosscover-icon-player"></span>',
    prevInnerHtml : '<span class="crosscover-icon-prev"></span>',
    nextInnerHtml : '<span class="crosscover-icon-next"></span>'
});

• Tag
• Animations
• jQuery