• RSS

[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は モンキーレンチ 様の記事を参考にさせていただきました。

jQuery を利用して画像を動かす方法には色々ありますが、指定した要素(画像など)を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。

縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。

jquery.yurayura.js のダウンロード

以下のページより jquery.yurayura.js をダウンロードします。


jquery.yurayura.js の設置

jQuery ファイルと一緒に jquery.yurayura.js を設置します。

オプションですが、move は移動距離で、delay は両端での停止時間、
duration は移動にかける時間 となるようです。

この値を調整しながら、要素を早く動かしたり、ゆったり動かしたりとサイトに合わせて見せ方を変えてみましょう。


デザイン制御と動きの調整

続いてデザインの方ですが、
「ふわふわ」動かす対象となる要素に position : absolute; を指定します。


簡単に簡単なデモを用意しました。
jquery.yurayura.js による「ふわふわ」動く要素のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください