jQueryの勉強を引き続き実施中です。今回は要素を移動させるコードを書いてみて実装。ページを表示したときに雨が降るようなアニメーションからボタンをクリックしたときに画像を移動させるようなものに仕上げたので備忘録。
webサイトの「はじめまして」画面と、画像を配置していくイメージで作りました。
主に使用したのは「.animate()」メソッドです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
※要素には画像を使っています。画像についてはご自身でご準備ください。
★応用していくときの流れ
STEP1.ページを表示したときに、画像をアニメーションで表示する。
↓
STEP2.jQueryでボタンをクリックしたときに画像を移動させる。
STEP1-1. htmlファイルを準備する
まずは「ページを表示したときに、画像をアニメーションで表示する。」に挑戦します。
アニメーションの流れは、以下の通りです。
①welcomeメッセージが表示される。
②メッセージが表示されたら画面の右側から豚が現れる。
表示させる画像の準備ができたら準備した画像に対してidを指定します。
そしてメッセージは落ちてくる動作にしたいので、あらかじめ表示位置を指定します。
表示位置はcssで指定します。以下、htmlファイルの中身です。↓
・・・・・cssの中身です・・・・・
#msg_b{
position:absolute;
}
#w_i{
position:absolute;
}
#e_i{
position:absolute;
top:50px;
left:115px;
}
#l_i{
position:absolute;
top:20px;
left:230px;
}
#c_i{
position:absolute;
top:70px;
left:345px;
}
#o_i{
position:absolute;
top:60px;
left:460px;
}
#m_i{
position:absolute;
top:10px;
left:575px;
}
#e2_i{
position:absolute;
top:80px;
left:690px;
}
#pig{
border:none;
outline:none;
background:white;
position:absolute;
top: 300px;
right: -100px;
}
・・・・・省略・・・・・
<div id="msg_b">
<img src="./img/w.jpg" id="w_i">
<img src="./img/e.jpg" id="e_i">
<img src="./img/l.jpg" id="l_i">
<img src="./img/c.jpg" id="c_i">
<img src="./img/o.jpg" id="o_i">
<img src="./img/m.jpg" id="m_i">
<img src="./img/e2.jpg" id="e2_i">
</div>
<button id="pig"><img src="./img/pig.png"></button>
</div>
どうでしょうか。画像を配置できたらOKです。
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryで画像をアニメーションで表示する
まずはページを表示したときに、「メッセージが落ちてくる」と「右から画像が移動する」をアニメーションさせます。
冒頭でも書きましたがアニメーションさせるために、今回は『.animate()』メソッドを使用します。
『.animate()』メソッドを使用することで、cssの内容をアニメーションで変化させることができます。
以下の内容を「sample.js」に記述します。
//メッセージボックスが落ちたら、豚が現れる。
$(function(){
$('#w_i').animate({ "top": "+=300px" },1000, function(){
$('#e_i').animate({ "top": "+=250px"},1000, function(){
$('#l_i').animate({ "top": "+=280px"},1000, function(){
$('#c_i').animate({ "top": "+=230px"},1000, function(){
$('#o_i').animate({ "top": "+=240px"},1000, function(){
$('#m_i').animate({ "top": "+=290px"},1000, function(){
$('#e2_i').animate({ "top": "+=220px"},1000, function(){
$('#pig').animate({ "right": "+=120px" },1500, function(){
});
});
});
});
});
});
});
});
どうですか？
メッセージが下がってきてから豚のイラストが画面右側から表示されたらOKです。
※ページを開いたときにメッセージと豚のイラストがアニメーションしない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイル内にボタンを追加する
メッセージと豚のアニメーションができるようになったら、
次は「jQueryでボタンをクリックしたときに画像を移動させる。」をしてみます。
動作は豚のイラストをクリックすると、メッセージと豚のイラストが消えるようにします。そしてすべて消えたら、ボタンと豚のイラストだけになり、ボタンをクリックするたびに豚のイラストが左右に移動するようにします。
まずは、htmlファイル内に豚をクリックしたときに表示する部分を準備します。
表示する豚のイラストとボタンを追加してdivタグで囲います。そして、はじめは表示しないので、
「style=”display:none;」を指定してください。
以下、htmlファイルの中身です。↓
<button id="pig"><img src="./img/pig.png"></button> ・・・・・省略・・・・・ <div id="block_area"style="display:none;"> <div class="col-xs-12" style="margin-top:50px;" id="i_pig"><img src="./img/pig.png"></div> <div class="col-xs-12 col-sm-2 col-sm-offset-5 col-md-2 col-md-offset-5"> <button id="left" type="button" class="btn btn-primary"> ← </button> <button id="right" type="button" class="btn btn-primary"> → </button> </div> </div>
どうでしょうか。
この時点ではまだ追加した部分が表示されていなければOKです。
続いて、追加した部分を表示させるので、豚をクリックしたときの動作をjsファイルに追加します。
消える動作は今までに学習した『.fadeOut()』メソッド、追加した部分を表示する動作は『.fadeIn()』メソッドを使用します。『.fadeOut()』メソッド、『.fadeIn()』メソッドについては過去の記事「jQueryでふわっと表示・非表示にする」を参考にしてみてください。
それでは、以下の内容をjsファイルに追記します。
//ボタンをクリックしたら、メッセージが上がって消える&画像とボタンを表示する。
$('#pig').click(function(){
$('#w_i,#e_i,#l_i,#c_i,#o_i,#m_i,#e2_i').animate({ "top": "-=300px" },800, function(){
$('#w_i,#e_i,#l_i,#c_i,#o_i,#m_i,#e2_i,#pig,#msg1').fadeOut(function(){
$('#block_area').fadeIn(600);
});
});
});
どうでしょうか。
以下の画像のように、豚のイラストをクリックすると最後には豚のイラストとボタンだけになったらOKです。
※ボタンをクリックしたときにうまく動作しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-2. jQueryでボタンをクリックしたときに画像を移動させる
続いてボタンに動きをつけていきます。
ボタンが『クリック』されたときに動きをするので、『.click()』メソッドを使用します。
動作は、ボタン(id)をクリックしたら豚のイラスト(id)を左右に移動するようにします。
速さは600ミリ秒を指定しています。
以下、jsファイルの中身です。↓
//ボタンをクリックしたら、豚を左右に動かす。
$(function(){
$('#left').click(function(){
$('#i_pig').animate({ "left" : "-=100px" },600);
});
$('#right').click(function(){
$('#i_pig').animate({ "left" : "+=100px" },600);
});
});
どうですか？
ボタンをクリックしたときに豚のイラストが左右に移動したらOKです。
※ボタンをクリックしたときに左右に動かない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
