CSS, HTML, JavaScript, JQuery, TweenMax, Web開発

【Web開発サンプル】imgをTweenMaxでアニメーションさせる。（今回は３パターン）

| by shimomura

使用ブラウザ:Google Chrome
使用言語：HTML, CSS, JavaScript
使用ライブラリ：JQuery, TweenMax


今回もTweenMaxを使用しました。
本当に色々出来て便利ですね。
アニメーションは３パターン作成しました。
まずは、よくサイトで見る下から上のアニメーションです。
次は左右からのアニメーションです。
最後はまずdivの黒い箱をスライドさせその後に画像をスライド表示させました。

以下コード

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>画像アニメーション</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Script -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>
<body>
  <header>
    <h2>ヘッダー</h2>
  </header>

  <div id="scroll-check">top:0</div>

  <section class="title">
    <h1>下から上へアニメーション</h1>
    <div class="container">
      <div class="item" id="item1">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="item" id="item2">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="item" id="item3">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
    </div>
  </section>

  <section class="title">
    <h1>横からアニメーション</h1>
    <div class="container">
      <div class="item" id="item1-side">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="item" id="item2-side">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="item" id="item3-side">
        <img src="img/image1.jpg" width="300" height="200">
      </div>
    </div>
  </section>

  <section class="title">
    <h1>少し変化させたスライドアニメーション</h1>
    <div class="container">
      <div class="slide-item">
        <div class="block" id="item1-slide">
        </div>
        <img id="item1-slide-img" src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="slide-item">
        <div class="block" id="item2-slide">
        </div>
        <img id="item2-slide-img" src="img/image1.jpg" width="300" height="200">
      </div>
      <div class="slide-item">
        <div class="block" id="item3-slide">
        </div>
        <img id="item3-slide-img" src="img/image1.jpg" width="300" height="200">
      </div>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
css
@charset "UTF-8";

html {
  padding: 0;
  margin: 0;
}

body {
  font-size: 14px;
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background: #f8f8f8;
}

.title {
  text-align: center;
}

.container {
  height: 600px;
  margin: 0 auto;
  text-align: center;
}

.item {
  display: inline-block;
  width: 300px;
  height: 200px;
}

#item1 {
  margin-top: 400px;
  opacity: 0.0;
}
#item2 {
  margin-top: 400px;
  opacity: 0.0;
}
#item3 {
  margin-top: 400px;
  opacity: 0.0;
}

#item1-side {
  margin-right: 200px;
  opacity: 0;
}
#item2-side {
  opacity: 1;
}
#item3-side {
  margin-left: 200px;
  opacity: 0;
}

.block {
  width: 300px;
  height: 200px;
  background: black;
}

#item1-slide, #item1-slide-img {
  top: 0;
  left: 0;
  margin-left: -300px;
  position: absolute;
}

#item2-slide, #item2-slide-img {
  top: 0;
  left: 0;
  margin-top: -300px;
  position: absolute;
}

#item3-slide, #item3-slide-img {
  top: 0;
  left: 0;
  margin-left: 300px;
  position: absolute;
}

.slide-item {
  width: 300px;
  height: 200px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#scroll-check {
  position: fixed;
  top: 100px;
  left: 20px;
  font-size: 24px;
}
js
(function(){
	'use strict';

	var didSideAnimation = false
	var didSlideAnimation = false

	// スクロール時のイベント
	$(window).scroll(function() {
		var top = $(this).scrollTop();
    $('#scroll-check').html('top:' + top);

		if(top >= 400) {
			inSideAnimation();
		}
		if(top >= 1000) {
			slideAnimation();
		}
	});

    // ロードイベント
	$(window).on("load",function(){
		fromDownToUpAnimation();
    });

	// スライドアニメーション
	function slideAnimation() {
		if(didSlideAnimation) {
			return;
		}
		didSlideAnimation = true;

		var tl = new TimelineMax();

		tl.to([$('#item1-slide'),$('#item2-slide'),$('#item3-slide')] , 0.5,
			{
				css:{marginTop:'0px', marginLeft:'0px'},
				ease: Power0.easeNone
			}
		).to([$('#item1-slide-img'), $('#item2-slide-img'), $('#item3-slide-img')] , 0.5,
			{
				css:{marginTop:'0px', marginLeft:'0px'},
				ease: Power0.easeNone
			}
		)
	}

	// 横からのアニメーション
	function inSideAnimation() {
		if(didSideAnimation) {
			return;
		}
		didSideAnimation = true;
		TweenMax.to([$('#item1-side'), $('#item3-side')], 4, {
			css:{marginLeft:'0px', marginRight:'0px', opacity:1},
			ease: Elastic.easeOut.config(1, 0.3),
			delay:0
		});
	}

	// 上から下へスライド
	function fromDownToUpAnimation() {
		TweenMax.to([$('#item1'), $('#item2'), $('#item3')], 2, {
			css:{marginTop:'0px', opacity:1},
			ease: Power4.easeOut,
			delay:0
		});
	}
	
})();

以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です