GSAPライブラリを活用してスライドアニメーションを実装する簡単な方法
本記事では、GSAP(GreenSock Animation Platform)ライブラリを使って、画像やテキストなどの要素をスライドアニメーションさせる簡単な方法を紹介します。jQueryライブラリとの組み合わせで、スムーズにスライドするアニメーション効果が容易に実現可能となります。
デモページ
ライブラリのCDN
以下のscriptタグをheadなどに配置することによってそれぞれのライブラリが利用可能になります。先ずはこれらのコードを、この後に紹介するスクリプトコードより手前に設置します。
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
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>
コードの解説
解説が開きます
<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 class="slide-content">
」
<div class="slide-date">
」, 「<div class="slide-title">
」,
「<div class="slide-text">
」,
「<div class="slide-more"><a href="記事のリンクアドレス">READ MORE</a></div>
」
<div class="arrows">
」
<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) }
コードの解説
解説が開きます
.slider
」
.flex
」
.slider-wrapper
」
.slider-wrapper div
」
.slide-image
」
.slide-image img
」
div.overlay-blue
」
.slide-content
」
.slide-date
」, 「.slide-title
」, 「.slide-text
」, 「.slide-more
」
.arrows
」
.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 パート:
変数の宣言: スライダーの幅の設定: ボタンクリックの処理:
解説が開きます
$(document).ready(function() { ... });
: ドキュメントが読み込まれた時に実行される処理を指定しています。これにより、DOMが準備された後にスクリプトが実行されることが保証されます。
var s = $('.slider'), sWrapper = s.find('.slider-wrapper'), ...
: jQueryを使用して、各要素への参照を変数に格納しています。例えば、s
はスライダー全体のコンテナを指し示しています。
sWidth
および sTotalWidth
の計算: スライダーの1つの要素の幅を取得し、それを基にスライダー全体の幅を計算しています。これにより、アニメーション時に正確な位置に移動できます。
btn.on('click', function(e) { ... });
: ナビゲーションボタンがクリックされた際の処理を定義しています。クリックに応じて clickCount
を増減させ、TweenMaxを使用してスライダーをアニメーションさせています。
GSAP (TweenLite, TweenMax) パート:
スライダーのアニメーション: コンテンツのアニメーション: アニメーションのプロパティ設定:
解説が開きます
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
: GSAPのTweenMaxを使用して、スライダーをアニメーション化しています。スライダーを左右に移動させています。
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'})
: 画像の表示をアニメーション化しています。同様に、日付、タイトル、テキスト、"READ MORE"の各コンテンツもアニメーションさせています。
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
, var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
: アニメーションの開始状態と終了状態のプロパティを設定しています。これらのプロパティはコンテンツの透明度や位置の変化を制御します。
おわりに
今回の記事では、GSAP(GreenSock Animation Platform)ライブラリを使用して、簡単にスライドアニメーションを実装する方法を紹介しました。この手法はjQueryライブラリとの組み合わせにより、スムーズかつ洗練されたスライド効果を容易に実現できます。
Webデザインやアニメーションの領域で活躍するGSAPを活用し、ユーザーエクスペリエンスを向上させましょう~♬