webOpixel

javascript

jQueryのanimateで自由にアニメーションできるようになろう

Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション

jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。

Posted: 2011.12.01 / Category: javascript / Tag: jQuery, アニメーション

Appleサイトのスライダー（カルーセル？）は画像がばらばらに切り替わるのでとてもクールですね。
ということで、動きはあまり再現されていないのですが、それっぽいのを作ってみました。

Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション

最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。
そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。

Posted: 2011.10.11 / Category: javascript / Tag: jQuery

マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。

Posted: 2011.09.29 / Category: javascript / Tag: jQuery, アニメーション

スライドして開く横型のサブナビゲーションを作ってみました。しかし、あまり柔軟性がよろしくないので局地的にしか使えなませが、もし興味あったら、、、。

Posted: 2011.09.22 / Category: javascript / Tag: jQuery

通常ラジオボタンは横一列で一つだけ選択できますが、jQueryを使用して縦の列も一つにする方法です。

Posted: 2011.09.16 / Category: javascript / Tag: CSS3, jQuery, アニメーション

スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。