[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」
スポンサード
「ふわふわ」動かす対象となる要素に
スポンサード
この記事は モンキーレンチ 様の記事を参考にさせていただきました。
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素(画像など)を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。
縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。
目次
jquery.yurayura.js のダウンロード
以下のページより jquery.yurayura.js をダウンロードします。jquery.yurayura.js の設置
jQuery ファイルと一緒に jquery.yurayura.js を設置します。1 2 3 4 5 6 7 8 9 10 11 | <script src="./jquery.min.js"></script> <script src="./jquery.yurayura.js"></script> <script> $(function(){ $('#box').yurayura( { 'move' : 5, 'delay' : 100, 'duration' : 1000 } ); }); </script> |
オプションですが、move
は移動距離で、delay
は両端での停止時間、
duration
は移動にかける時間 となるようです。
この値を調整しながら、要素を早く動かしたり、ゆったり動かしたりとサイトに合わせて見せ方を変えてみましょう。
デザイン制御と動きの調整
続いてデザインの方ですが、「ふわふわ」動かす対象となる要素に
position : absolute;
を指定します。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> #contents { position:relative } #box { position : absolute; top : 0; left : 0; background:#dd0000; width:100px; height:100px; } </style> <div id="contents"> <div id="box"></div> </div> |
簡単に簡単なデモを用意しました。
jquery.yurayura.js による「ふわふわ」動く要素のデモ
スポンサード
コメント