jQuery アニメーション メモ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<title>anime test WEB</title>

<body>

<div class="box">
<div id="item01" class="anime"><img src="img/mainimg.jpg"><br>
あなたの会社は損してませんか?</div>
<div id="item02" class="anime"><img src="img/top02.jpg"></div>
<div id="item03" class="anime"><img src="img/etc0.png"></div>
<div id="item04" class="anime"><img src="img/etc01.jpg"></div>
<div id="item05" class="anime">この一年ですでに1000社以上が経費削減を実現!</div>
<div id="item06" class="anime"><img src="img/etc02.png"></div>
<div id="item07" class="anime">1箇所でも該当される方は、経費削減の可能性大!!</div>
<div id="item08" class="anime">◯首都高、阪神高速で、クレジット会社ETCカードを利用している。<br>
◯首都高、阪神高速で、1台で5000円超の利用がある。<br>
NEXCOの利用が多く、ETCカードの見直しをしていない。</div>
<div id="item09" class="anime">◯マイレージ登録をしているが、1台あたり10,000円以上の
利用がある。<br>
◯ETCコーポレートカードを利用し、規定の通りの割引を受けていない。<br>
◯ETCコーポレートカードを利用したいが、3万円以下の車両が多い。</div>
<div id="item10" class="anime">◯高速道路各社の割引変更に応じた見直しがしたい。<br>
◯定期的に利用状況に応じた見直し提案がほしい。<br>
◯早い対応のできる協同組合を探している。</div>
<div id="logo" class="anime">ETCカードの見直しを。</div>
<div id="last" class="anime"><img src="img/7.png"></div>
<div id="skipBtn" class="btn"><a href="#">SKIP</a></div>
<div id="replayBtn" class="btn"><a href="#">REPLAY</a></div>
</div>

<script>

$(window).load(function() {

// 各要素を変数に指定します
var $item01 = $('#item01'),
$item02 = $('#item02'),
$item03 = $('#item03'),
$item04 = $('#item04'),
$item05 = $('#item05'),
$item06 = $('#item06'),
$item07 = $('#item07'),
$item08 = $('#item08'),
$item09 = $('#item09'),
$item10 = $('#item10'),
$logo = $('#logo'),
$last = $('#last'),
$skip = $('#skipBtn');
$replay = $('#replayBtn');
showitem = {opacity:1,top:"-=5%"}; // 上に5%移動しながら表示
hideitem = {opacity:0,top:"-=10%"}; // 上に10%移動しながら非表示

// アニメーションの順番を設定
function playAnimation(){
animation01()
.then(animation02)
.then(animation03)
.then(animation04)
.then(animation05)
.then(animation06)
.then(animation07)
.then(animation08)
.then(animation09)
.then(animation10)
.then(logo)
.then(last);
}

// リプレイボタンを設定
$replay.on('click', function(){
onReplay();
});

// リプレイ処理
function onReplay(){
$item01.stop(true, true).show().css({'top': 35 + "%"});
$item02.stop(true, true).show().css({'top': 50 + "%"});
$item03.stop(true, true).show().css({'top': 45 + "%"});
$item04.stop(true, true).show().css({'top': 50 + "%"});
$item05.stop(true, true).show().css({'top': 45 + "%"});
$item06.stop(true, true).show().css({'top': 40 + "%"});
$item07.stop(true, true).show().css({'top': 50 + "%"});
$item08.stop(true, true).show().css({'top': 25 + "%"});
$item09.stop(true, true).show().css({'top': 50 + "%"});
$item10.stop(true, true).show().css({'top': 25 + "%"});
$logo.stop(true, true).show().css({'left': -300 + "%",'opacity': 0});
$last.stop(true, true).show().css({'opacity': 0,'top' :45 + "%"});
$skip.stop(true, true).show();
$replay.stop(true, true).hide();
playAnimation();
}

// スキップボタンを設定
$skip.on('click', function(){
onSkip();
return false;
});

// スキップ処理
function onSkip(){
$item01.stop(true, true).hide();
$item02.stop(true, true).hide();
$item03.stop(true, true).hide();
$item04.stop(true, true).hide();
$item05.stop(true, true).hide();
$item06.stop(true, true).hide();
$item07.stop(true, true).hide();
$item08.stop(true, true).hide();
$item09.stop(true, true).hide();
$item10.stop(true, true).hide();
$logo.stop(true, true).css({'left': 0 + "%",'opacity': 1});
$last.stop(true, true).css({'opacity': 1,'top' :40 + "%"});
$skip.stop(true, true).hide();
$replay.stop(true, true).show();
}

// 各アニメーションを順番に記述します
function animation01() {
var d = new $.Deferred;
$item01.animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation02(){
var d = new $.Deferred;
$item01.animate(hideitem,1000),
$item02.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation03(){
var d = new $.Deferred;
$item02.delay(500).animate(hideitem,1000),
$item03.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation04(){
var d = new $.Deferred;
$item03.delay(500).animate(hideitem,1000),
$item04.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation05(){
var d = new $.Deferred;
$item04.delay(500).animate(hideitem,1000),
$item05.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation06(){
var d = new $.Deferred;
$item05.delay(500).animate(hideitem,1000),
$item06.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation07(){
var d = new $.Deferred;
$item06.delay(500).animate(hideitem,1000),
$item07.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation08(){
var d = new $.Deferred;
$item07.delay(500).animate(hideitem,1000),
$item08.delay(1000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation09(){
var d = new $.Deferred;
$item08.delay(4000).animate(hideitem,1000),
$item09.delay(4500).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function animation10(){
var d = new $.Deferred;
$item09.delay(1500).animate(hideitem,1000),
$item10.delay(2000).animate(showitem,2000, function(){d.resolve();});
return d.promise();
}
function logo(){
var d = new $.Deferred;
$item10.delay(4000).animate(hideitem,1000),
$logo.delay(5500).animate({opacity:1,left:0 + "%"},2000, 'easeOutBack', function(){d.resolve();});
return d.promise();
}
function last(){
var d = new $.Deferred;
$last.delay(500).animate(showitem,2000),
$skip.hide(),
$replay.show(function(){d.resolve();});
return d.promise();
}

// 実行
playAnimation();

}());

</script>

</body>
</head>

-----

css

.box {
overflow:hidden;
text-align: center;
}

.anime {
position: absolute;
margin: auto;
width: 100%;
top:50%;
margin-top:0%;
opacity:0;
color:#424242;
font-size:34px;
line-height:160%;
letter-spacing:0.1em;
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic", "Osaka",sans-serif;
}
.anime span{
letter-spacing:0em;
}
.btn a{
font-size:12px;
display:block;
color:#FFF;
position: fixed;
right:10px;
bottom:10px;
padding:5px 25px;
background-color:#999;
font-weight:bold;
text-decoration:none;
font-family: Century Gothic,Arial,sans-serif;
}
#replayBtn {
display:none;
}
#item01{
top:35%;
}
#item06{
top:40%;
}
#item03,
#item05,
#last{
top:45%;
}
#item08,
#item10{
top:25%;
font-size:22px;
line-height:210%;
font-weight:normal;
letter-spacing:0em;
}
#logo{
left:-300%;
top:40%;
}
#last{
margin-top: 60px;
}

@media screen and (max-width : 480px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
.anime{
font-size:24px;
width: 96%;
padding:0 2%;
}
.anime img{
width:45%;
}
#item08{
font-size:9px;
}
#item10{
font-size:12px;
}
#last{
margin-top: 45px;
}
}

@media screen and (max-width : 320px){
.anime{
font-size:20px;
}
.anime img{
width:40%;
}
#item08{
top:30%;
letter-spacing:-0.1em;
}
#item10{
top:25%;
letter-spacing:0em;
}
#last{
margin-top: 35px;
}
}