jQuery/CSS3で雲をゆらゆらさせる
はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「background」に割り当てましょう。 css #main-img { width: 800px; margin: 0 auto; background: #9bd6e9 url("bg2.png"); } #main-i
JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。 この記事を元に少しアレンジしてサンプルを作成したので紹介します。 これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。 それではサンプルを紹介していきます。 雲の背景画像をループさせアニメーション 雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。 コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
在校生のTwitterユーザーをリストアップ、不適切発言を早期発見するサービス