みなさんこんにちは～
今日はにょきっとナビゲーションとふんわりナビゲーションをもう少し改造します。
過去記事にょきっとナビゲーションはコチラ
過去記事ふんわりナビゲーションはコチラ
どこを改造するのかというと、まずは表示するスピードです。
動きがあるものには必ずスピードの設定が出来ます。
もうちょっとゆっくりじんわり表示したい！いやいやもうちょっとササっとスピーディに表示したい！
などなど、人によって好みはバラバラだと思いますのでそこをカスタマイズしたいと思います。
次にエフェクト（Easing）を使って表示方法を変更します。
これはちょっと説明が難しいんですが、簡単に言うとこんな感じです。
最初はゆっくりで徐々に早くなってくる！とか
最初は早くて徐々にゆっくりになってくる。など
動きに強弱をつけて表示する方法を説明したいと思います。
それでは最初は表示スピードの変更方法です！
まずにょきっとナビゲーションを元にやっていきます。
<script type="text/javascript">
(function($){
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$("#menu").stop().animate({"bottom": "0px"}, 100); //#menuをスライドインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$("#menu").stop().animate({"bottom": "-60px"}, 100); //#menuをスライドアウトしなさい！
}
});
}(jQuery));
</script>
前回のにょきっとナビゲーションにはちょっと不備がありました。
赤文字の.stop()はアニメーションさせる時は付けた方が良いです（場合によりますが）
今回はこのコードを元にやって行きます。
どこでスピードを変えるのかというと。
<script type="text/javascript">
(function($){
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$("#menu").stop().animate({"bottom": "0px"}, 100); //#menuをスライドインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$("#menu").stop().animate({"bottom": "-60px"}, 100); //#menuをスライドアウトしなさい！
}
});
}(jQuery));
</script>
この赤文字の１００という数字がスピードを表しています。
数値が大きくなる程ゆっくり動き、小さくなる程速く動きます。
その他にこのように指定する事も出来ます。
このように"slow"もしくは"normal"または"fast"と３種類設定出来ます。
簡単ですね！
これでお好みのスピードに調整してみて下さい。
んでは次にEasingを使って表示速度に変化を加えます。
変化っていまいちわかりにくいと思うので、このブログのナビゲーションにEasing使ってみました。
このページの一番上にスクロールして、少し下にスクロールすると、ウィンドウの下部にナビゲーションが出現します。
出てくる時にぼよよよ～んってバウンドしたように出てきませんか？
これがEasingの効果です！これのやり方を説明します。
流れとしては、Easingのスクリプトをダウンロードして、お使いのサーバーにアップロードします。
それをアメブロのフリープラグインで読み込んで実装します。
サーバーなんて持ってないって方は僕のサーバーにあるEasingスクリプトを読み込んでもいいですが、予告無く消すかもしれません・・・
出来れば自分のサーバーに置いておいた方が安全です。
では、まず！Easingプラグインをダウンロードします。
Easingプラグイン
上記ページにアクセスするとこのようなページに行きます。
上記画像のように「jquery.easing.1.3.js」と書かれたリンクを右クリックして名前を付けて保存して下さい。
名前は適当で良いですが仮にここではそのままjquery.easing.1.3.jsとして保存した事にします。
jquery.easing.1.3.jsファイルをお使いのサーバーにアップロードし、アメブロフリープラグインに読み込みます。
読み込み方はいつも通り。
<script src="ここにアップロードしたURL" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$("#menu").stop().animate({"bottom": "0px"}, "slow"); //#menuをスライドインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$("#menu").stop().animate({"bottom": "-60px"}, "slow"); //#menuをスライドアウトしなさい！
}
});
}(jQuery));
</script>
赤文字で書かれたコードに注目。このように読み込みます。
※サーバー持っていない！いつ消えて動かなくなっても怒らない方は僕のサーバーのプラグインをお使いください。
読み込んだら次にエフェクトを決めます。沢山の種類がありますので下記ページで好きなエフェクトを選んで下さい！
http://semooh.jp/jquery/cont/doc/easing/
因みに僕のメニューのエフェクトは「easeOutBounce」です。
決めれましたか？色んな動きがあって迷いますが、決まったらエフェクトの名前を覚えておいて下さい。
では設定方法です。とても簡単です。
<script src="ここにアップロードしたURL" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //トップから200pxスクロールしたら？
$("#menu").stop().animate({"bottom": "0px"}, "slow","easeOutBounce"); //#menuをスライドインしなさい！
} else { //それ以外は？（それ以外とは、ここでは200px以下という事になります。）
$("#menu").stop().animate({"bottom": "-60px"}, "slow","easeOutBounce"); //#menuをスライドアウトしなさい！
}
});
}(jQuery));
</script>
最初にEasingプラグインを読み込んで、赤文字の所でさっき決めたエフェクト名を入れるだけです。
これでお好みの動きが出来たのではないでしょうか？？
はじめはちょっとややこしいですが、慣れてしまえば簡単です！
この辺の情報は、アメブロだけではなく普通のサイト制作でも使えますので是非お試しください！
ではまた！