トップ > GSAP > GSAPライブラリを活用してスライドアニメーションを実装する簡単な方法

GSAPライブラリを活用してスライドアニメーションを実装する簡単な方法

GSAP Webデザイン JavaScript jQuery アニメーション

本記事では、GSAP（GreenSock Animation Platform）ライブラリを使って、画像やテキストなどの要素をスライドアニメーションさせる簡単な方法を紹介します。jQueryライブラリとの組み合わせで、スムーズにスライドするアニメーション効果が容易に実現可能となります。

https://pixabay.com/photos/waterslide-waterpark-aquapark-pool-398249/

デモページ

デモページを見る

ライブラリのCDN

以下のscriptタグをheadなどに配置することによってそれぞれのライブラリが利用可能になります。先ずはこれらのコードを、この後に紹介するスクリプトコードより手前に設置します。

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

gsap.com

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常、<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。

ソースコード

HTML -> CSS -> JavaScriptの順に紹介します。

HTMLの構造

大きく分けると、

  • 「div.slider」という箱の中に
  • 「div.slider-wrapper.flex」（記事カードの要素）という箱と
  • 「div.arrows」（矢印ボタンの要素）という箱の2つの大枠があり、さらに
  • 「div.slider-wrapper.flex」の中の「div.slider.flex」で囲んだ要素が、

一つの記事のかたまりとなっています。

<!-- GSAP slider -->

<div class="slider">
  <div class="slider-wrapper flex">
    
    <!-- コンテンツを増やす場合、ココから -->
    <div class="slide flex">
      <div class="slide-image slider-link next">
        <img src="サムネイル画像のURL">
        <div class="overlay"></div>
      </div>
      <div class="slide-content">
        <div class="slide-date">記事の公開日</div>
        <div class="slide-title">記事タイトル</div>
        <div class="slide-text">記事概要文</div>
        <div class="slide-more"><a href="記事のリンクアドレス">READ MORE</a></div>
      </div>
    </div>
    <!-- ココまでの範囲を複製する。 -->
    
  </div>
  <div class="arrows">
    <a href="#" title="Previous" class="arrow slider-link prev"></a>
    <a href="#" title="Next" class="arrow slider-link next"></a>
  </div>
</div>

コードの解説

解説が開きます

  1. 「<div class="slider">」
    • スライド全体のコンテナ
  2. 「<div class="slider-wrapper flex">」
    • スライドのラッパーで、内部の要素は横に配置される
  3. 「<div class="slide flex">」
    • 各スライドのコンテンツを包むコンテナ
    • この範囲内を複製して新しいスライドを追加する
  4. 「<div class="slide-image slider-link next">」
    • スライド内の画像と次へのナビゲーションリンク
  5. 「<img src="サムネイル画像のURL">」
    • スライドのサムネイル画像を指定
  6. 「<div class="overlay"></div>」
    • オーバーレイの要素（画像をマウスオーバーした時、色調を変化させるための要素）
  7. 「<div class="slide-content">」
    • スライドのテキストコンテンツ
  8. 「<div class="slide-date">」, 「<div class="slide-title">」,
    「<div class="slide-text">」,
    「<div class="slide-more"><a href="記事のリンクアドレス">READ MORE</a></div>」
    • 日付やタイトルなど各コンテンツの要素
  9. 「<div class="arrows">」
    • 前後のナビゲーション矢印のコンテナ
  10. 「<a href="#" title="Previous" class="arrow slider-link prev"></a>」,
    「<a href="#" title="Next" class="arrow slider-link next"></a>」
    • 前へ/次へのナビゲーションリンク

CSSでスタイリング

/* Gsap slider */

.slider {
  position: relative;
  width: 100vw;
  height: 600px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: #0D1B2B;
  overflow: hidden;
  font-family: 'Roboto'
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start
}

.slider-wrapper {
  margin-top: 5vw;
  margin-left: 11vw
}

.slider-wrapper div {
  position: relative
}

.slide-image {
  height: 24vw
}

.slide-image img {
  max-width: 12em;
  height: 12em;
  object-fit: cover;
  cursor: pointer
}

div.overlay-blue {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s ease all
}

div.overlay-blue:hover {
  background: rgba(13, 27, 43, .5)
}

.slide-content {
  width: 25em;
  padding: 0 3em;
  color: #fff
}

.slide-date {
  color: #0a8acb;
  font-size: 1.1em;
  letter-spacing: .1em;
  padding-bottom: 1.4em
}

.slide-title {
  font-size: 1.2em;
  letter-spacing: .1em;
  line-height: 1.2em;
  padding-bottom: 1.8em
}

.slide-text {
  font-size: .8em;
  line-height: 1.5em;
  opacity: .8;
  padding-bottom: 4em
}

.slide-more {
  float: left;
  font-size: .9em
  font-weight: 400;
  letter-spacing: .1em;
}

.arrows {
  position: absolute;
  width: 3.5em;
  height: 2em;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto
}

.arrow {
  position: absolute;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: transparent;
  border-top: .15em solid #fff;
  border-left: .15em solid #fff;
  transition: all .1s ease-in-out;
}

.arrow:hover {
  border-color: #0A8ACB;
  border-width: .25vw
}

.arrow::before {
  content: '';
  display: block;
  width: 200%;
  height: 200%;
  margin-top: -50%;
  margin-left: -50%;
  transform: rotate(45deg)
}

.arrow.prev {
  left: 0;
  transform: rotate(-45deg)
}

.arrow.next {
  right: 0;
  transform: rotate(135deg)
}

コードの解説

解説が開きます

  1. 「.slider」
    • スライド全体のコンテナに関するスタイル
  2. 「.flex」
    • Flexboxを使用し、子要素を横に並べる
  3. 「.slider-wrapper」
    • スライドを包むラッパー要素のスタイル
  4. 「.slider-wrapper div」
    • スライドの各要素に対し相対的な位置を設定
  5. 「.slide-image」
    • スライド内画像のコンテナスタイル
  6. 「.slide-image img」
    • スライド内の画像スタイル
  7. 「div.overlay-blue」
    • ホバー時に色をアニメーション変化
  8. 「.slide-content」
    • スライド内のコンテンツ全体に関するスタイル
  9. 「.slide-date」, 「.slide-title」, 「.slide-text」, 「.slide-more」
    • 各コンテンツ要素のスタイル
  10. 「.arrows」
    • ナビゲーション矢印のコンテナスタイル
  11. 「.arrow」, 「.arrow.prev」, 「.arrow.next」
    • 矢印要素のスタイル

JavaScript

このJavaScriptコードは、「jQueryライブラリ」と「GSAP（GreenSock Animation Platform）ライブラリ」を利用して、スライダーの動作とコンテンツのアニメーションを実現しています。

/** GSAP slider */

( function( $ ) {
  $( document )
    .ready( function() {
      var s = $( '.slider' )
        , sWrapper = s.find( '.slider-wrapper' )
        , sItem = s.find( '.slide' )
        , btn = s.find( '.slider-link' )
        , sWidth = sItem.width()
        , sCount = sItem.length
        , slide_date = s.find( '.slide-date' )
        , slide_title = s.find( '.slide-title' )
        , slide_text = s.find( '.slide-text' )
        , slide_more = s.find( '.slide-more' )
        , slide_image = s.find( '.slide-image img' )
        , sTotalWidth = sCount * sWidth;
      sWrapper.css( 'width', sTotalWidth );
      sWrapper.css( 'width', sTotalWidth );
      var clickCount = 0;
      btn.on( 'click', function( e ) {
        e.preventDefault();
        if ( $( this )
          .hasClass( 'next' ) ) {
          ( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount =
            0;
        } else if ( $( this )
          .hasClass( 'prev' ) ) {
          ( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
        }
        TweenMax.to( sWrapper, 0.4, {
          x: '-' + ( sWidth * clickCount )
        } )

        /** CONTENT ANIMATIONS */
        var fromProperties = {
          autoAlpha: 0
          , x: '-50'
          , y: '-10'
        };
        var toProperties = {
          autoAlpha: 0.8
          , x: '0'
          , y: '0'
        };
        TweenLite.fromTo( slide_image, 1, {
          autoAlpha: 0
          , y: '40'
        }, {
          autoAlpha: 1
          , y: '0'
        } );
        TweenLite.fromTo( slide_date, 0.4, fromProperties, toProperties );
        TweenLite.fromTo( slide_title, 0.6, fromProperties
          , toProperties );
        TweenLite.fromTo( slide_text, 0.8, fromProperties, toProperties );
        TweenLite.fromTo( slide_more, 1, fromProperties, toProperties );
      } );
    } );
} )( jQuery );
$( '.overlay' )
  .addClass( 'overlay-blue' );

コードの解説

jQueryは主にDOMの操作とイベント処理に、GSAPはアニメーションに使用されています。

jQuery パート:

解説が開きます

  1. $(document).ready(function() { ... });: ドキュメントが読み込まれた時に実行される処理を指定しています。これにより、DOMが準備された後にスクリプトが実行されることが保証されます。

  2. 変数の宣言:

    • var s = $('.slider'), sWrapper = s.find('.slider-wrapper'), ...: jQueryを使用して、各要素への参照を変数に格納しています。例えば、s はスライダー全体のコンテナを指し示しています。

  3. スライダーの幅の設定:

    • sWidth および sTotalWidth の計算: スライダーの1つの要素の幅を取得し、それを基にスライダー全体の幅を計算しています。これにより、アニメーション時に正確な位置に移動できます。

  4. ボタンクリックの処理:

    • btn.on('click', function(e) { ... });: ナビゲーションボタンがクリックされた際の処理を定義しています。クリックに応じて clickCount を増減させ、TweenMaxを使用してスライダーをアニメーションさせています。

GSAP (TweenLite, TweenMax) パート:

解説が開きます

  1. スライダーのアニメーション:

    • TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) }): GSAPのTweenMaxを使用して、スライダーをアニメーション化しています。スライダーを左右に移動させています。

  2. コンテンツのアニメーション:

    • TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'}): 画像の表示をアニメーション化しています。同様に、日付、タイトル、テキスト、"READ MORE"の各コンテンツもアニメーションさせています。

  3. アニメーションのプロパティ設定:

    • var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};, var toProperties = {autoAlpha:0.8, x:'0', y:'0'};: アニメーションの開始状態と終了状態のプロパティを設定しています。これらのプロパティはコンテンツの透明度や位置の変化を制御します。

おわりに

今回の記事では、GSAP（GreenSock Animation Platform）ライブラリを使用して、簡単にスライドアニメーションを実装する方法を紹介しました。この手法はjQueryライブラリとの組み合わせにより、スムーズかつ洗練されたスライド効果を容易に実現できます。

Webデザインやアニメーションの領域で活躍するGSAPを活用し、ユーザーエクスペリエンスを向上させましょう~♬