マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
jquery1.8にしたらanimateでbackground-positionを動かせなくなったって人は挙手をどうぞ | 日記の間 | あかつきのお宿
はいはいはーい！ ノシ ということで、うっかりjqueryのバージョンを1.8に上げたら、今までanimateで動かしてたbackground-positionが急に動かなくなってしまいました。 以前、jqueryのanimateでbackground-positionを動かそうっていう記事で、まさしく背景のポゼッショニングを華麗にそして流麗に動かす方法を書きましたが、あれはjqueryのバージョンが1.7以下の場合に有効な方法だったようです。1.8にすると残念ながらこの方法では動かなくなる。 なので、上記の記事には実際にアニメーションさせるサンプルをセットで載せといたんですが、それが動かなくなってしまいました……さーせん。 あとでこっそりあのサンプルページで読み込むjqueryを1.7に差し替えとかないとね……そうしないと、あっちの記事だけ読んだ人が「ああん？ 動かねーじゃねーか。嘘情報
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。 この記事を元に少しアレンジしてサンプルを作成したので紹介します。 これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。 それではサンプルを紹介していきます。 雲の背景画像をループさせアニメーション 雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。 コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
