JQueryで背景画像を動かすアニメーション効果

テクノロジーカテゴリーの変更を依頼記事元:

detarame.moo.jp

18 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fdetarame.moo.jp%2F2012%2F07%2F18%2Fjquery%25E3%2581%25A7%25E8%2583%258C%25E6%2599%25AF%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E5%258B%2595%25E3%2581%258B%25E3%2581%2599%25E3%2582%25A2%25E3%2583%258B%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E5%258A%25B9%25E6%259E%259C%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://detarame.moo.jp/2012/07/18/jquery%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C/">JQueryで背景画像を動かすアニメーション効果</a><a href="https://b.hatena.ne.jp/entry/detarame.moo.jp/2012/07/18/jquery%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C/">はてなブックマーク - JQueryで背景画像を動かすアニメーション効果</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

JQueryで背景画像を動かすアニメーション効果

JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事... JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。この記事を元に少しアレンジしてサンプルを作成したので紹介します。これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。それではサンプルを紹介していきます。雲の背景画像をループさせアニメーション雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの