【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」

 
FADE・ZOOM・ROTATE・FLIP・LIGHTSPEEDと多彩なアニメーションエフェクトが用意されている「Crosscover」。オプションで自動再生やコントローラーなどもあり活用できそうなプラグインです。

Crosscover

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はjQueryとダウンロードした「sweet-alert.min.js」を読み込ませます。

Java File
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/js/crosscover.min.js"></script>

CSSはダウンロードした「crosscover.min.css」と「animate.min.css」を読み込ませます。

CSS File
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/crosscover.min.css">

あとは以下のようにhtmlを記述してjavaで適用する要素を指定して完成です。

html
<div class="crosscover">

  <div class="crosscover-list">
            <img src="/images/01.jpg" alt="image01"/>
        </div>
    <div class="crosscover-item">
            <img src="/images/02.jpg" alt="image02"/>
        </div>
    <div class="crosscover-item">
            <img src="/images/03.jpg" alt="image03"/>
        </div>
  </div>

</div>
Java
 $(".crosscover").crosscover({
    inClass: 'fade-in',
    outClass: 'fade-out',
    interval: 5000,
    startIndex: 0,
    autoPlay: true,
    dotsNav: true,
    controller: false,
    controllerClass: 'crosscover-controller',
    prevClass: 'crosscover-prev',
    nextClass: 'crosscover-next',
    playerClass: 'crosscover-player',
    playerInnerHtml: '<span class="crosscover-icon-player"></span>',
    prevInnerHtml: '<span class="crosscover-icon-prev"></span>',
    nextInnerHtml: '<span class="crosscover-icon-next"></span>'
});

  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • 【jQuery】レスポンシブ・フレキシブルなモーダルウィンドウ「iziModal.js」
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
RELATED POSTS
  • 【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • ページをめくるようなエフェクトを実装できる「Page Flip Layout」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」