JavaScriptアニメーション [TweenMax]

JavascriptアニメーションライブラリTweenMaxを用いて、アニメーションを作成してみます。

TweenMax
http://greensock.com/tweenmax

Angkor Wat

アンコール・ワット

Machu Picchu

マチュ・ピチュ

Mont Saint-Michel

モン・サン=ミシェル

replay

Load Files


HTML

Angkor Wat

アンコール・ワット

Machu Picchu

マチュ・ピチュ

Mont Saint-Michel

モン・サン=ミシェル

replay

CSS

.tween_canvas {
  width: 1000px;
  margin: 0 auto;
  height: 600px;
  background-color: #ffffff;
  position: relative;
}
.name_en {
  box-sizing: border-box;
  width: 100%;
  padding-right: 20px;
  padding-bottom: 20px;
  font-size: 60px;
  text-align: right;
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
}
.name_jp {
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
  position: absolute;
}
.landscape1 {
  background: url(../img/test_05/bg_landscape1.jpg) no-repeat 0 0;
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
}
.landscape1 .name_jp {
  right: 80px;
  bottom: 10px;
}
.landscape2 {
  background: url(../img/test_05/bg_landscape2.jpg) no-repeat 0 -200px;
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.landscape2 .name_jp {
  right: 30px;
  bottom: 80px;
}
.landscape3 {
  background: url(../img/test_05/bg_landscape3.jpg) no-repeat -200px 0;
  width: 100%;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.landscape3 .name_jp {
  right: 80px;
  bottom: 10px;
}
.btn_replay {
  display: none;
  width: 100px;
  height: 50px;
  color: #333333;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

JavaScript

$(function(){

    var mainTimeLine = new TimelineMax();
    
    // アニメーション1実行
    mainTimeLine.to('.landscape1', 8, {
        backgroundPosition: '-200px 0px',
        onStart: function(){
            var subTimeLine = new TimelineMax();
            subTimeLine.to('.landscape1 .name_en', 3, {
                opacity: 0.3
            });
            subTimeLine.add(TweenMax.to('.landscape1 .name_jp', 1, {
                right: '30px',
                opacity: 1
            }));
        },
        onComplete: function(){
            $('.landscape1').fadeOut();
        }
    });
    // アニメーション1フェードアウト
    mainTimeLine.add(TweenMax.to('.landscape1', 0.3, { opacity: 0 }));

    // アニメーション2フェードイン
    mainTimeLine.add(TweenMax.to('.landscape2', 0.3, { opacity: 1 }));
    // アニメーション2実行
    mainTimeLine.add(TweenMax.to('.landscape2', 8, {
        backgroundPosition: '0px 0px',
        onStart: function(){
            $('.landscape2').fadeIn();
            var subTimeLine = new TimelineMax();
            subTimeLine.to('.landscape2 .name_en', 3, {
                opacity: 0.6
            });
            subTimeLine.add(TweenMax.to('.landscape2 .name_jp', 1, {
                bottom: '10px',
                opacity: 1
            }));
        },
        onComplete: function(){
            $('.landscape2').fadeOut();
        }
    }));
    // アニメーション2フェードアウト
    mainTimeLine.add(TweenMax.to('.landscape2', 0.3, { opacity: 0 }));

    // アニメーション3フェードイン
    mainTimeLine.add(TweenMax.to('.landscape3', 0.3, { opacity: 1 }));
    // アニメーション3実行
    mainTimeLine.add(TweenMax.to('.landscape3', 8, {
        backgroundPosition: '0px 0px',
        onStart: function(){
            $('.landscape3').fadeIn();
            var subTimeLine = new TimelineMax();
            subTimeLine.to('.landscape3 .name_en', 3, {
                opacity: 0.3
            });
            subTimeLine.add(TweenMax.to('.landscape3 .name_jp', 1, {
                right: '30px',
                opacity: 1
            }));
        },
        onComplete: function(){
            $('.landscape3').fadeOut();
            $('.btn_replay').fadeIn();
        }
    }));


    // リプレイボタン
    $('.btn_replay').on('click',function(){
        $('.landscape1').show();
        $('.landscape1').css('opacity', 1);
        $('.landscape2').hide();
        $('.landscape2').css('opacity', 0);
        $('.landscape3').hide();
        $('.landscape3').css('opacity', 0);
        $('.btn_replay').hide();
        mainTimeLine.restart();
    });

});