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

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

| by shimomura

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


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

以下コード

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
(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
        });
    }
     
})();

以上です。

コメントを残す

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