特定の位置までスクロールしたら、フェード+アニメーションで表示するプラグイン「scrollAnimateOption.js」を作りました。
パララックスサイトなどとは異なり、アニメーション処理は1度しか行われません。
「scrollAnimateOption.js」のデモページはこちら
「scrollAnimateOption.js」のダウンロード
設定方法
jQueryとscrollAnimateOption.jsを読み込みます。
easingを使いたい場合は、こちらのサイトからダウンロードして、一緒に読み込むようにしてください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="scrollAnimateOption.js"></script>
HTML
<div id="sample01"><img src="./img/img01.jpg" width="200" height="140" /></div>
CSS
#sample01 {
position: absolute;
top: 300px;
left: 200px;
}
CSSはposition: absolute; とtop、leftを指定して配置するようにしてください。
JavaScript
$(function(){
$("#sample01").sao();
});
オプション
$(function(){
$("#sample01").sao({
point: 1000,
ratio: 0.5,
moveX: -50,
moveY: -50,
speed: 600,
fadeSpeed: 300,
delay: 500,
easing: 'easeInQuad',
callback: function() {
// callback内容を記述
}
});
});
| point | アニメーションを開始するスクロール位置を数値で指定。 初期値は対象要素が画面下部からスクロールで表示された時。 (ページ上部から対象要素までの距離) |
|---|---|
| ratio | 拡大・縮小のアニメーションをさせる時に使用。 数値で指定で、初期値は1。 拡大・縮小する軸は対象要素の中心になります。 50%縮小させた状態からアニメーションする場合は「0.5」、 150%拡大した状態からは「1.5」のように指定。 |
| moveX | X方向の移動のアニメーションをするときに使用。 数値で指定で、初期値は0。 元の位置より100px左からアニメーションを開始する場合は「-100」、 右からの場合は「100」のように指定。 moveXとmoveYの併用で斜め移動もできます。 |
| moveY | Y方向の移動のアニメーションをするときに使用します。 数値で指定で、初期値は0。 元の位置より100px上からアニメーションを開始する場合は「-100」、 下からの場合は「100」のように指定。 moveXとmoveYの併用で斜め移動もできます。 |
| speed | アニメーションするスピードの指定に使用。 数値で指定で、初期値は500。 |
| fadeSpeed | フェードインするスピードの指定に使用。 数値で指定で、初期値は500。 |
| delay | アニメーションの実行を遅らせる場合に使用。 数値で指定で、初期値は0。 pointの値が同じ要素を、タイミングをずらして動かしたい場合などに指定します。 |
| easing | easingの指定に使用します。 jquery.easing.jsを使用していない場合は、「swing」「linear」から指定。 初期値は’swing’。 easingの種類はこちらを参考に、easingの説明はこちらが参考になります。 |
| callback | アニメーション後に何か処理をする場合に使用します。 例えば、アニメーション後にアラートを出す場合は、 function(){ alert(‘turnUpのコールバックです’); } のように記述します。 初期値は何も設定されていません。 |
コメントが承認されるまで時間がかかります。