jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
jQuery で実現する パララックス効果をヒントにしたシンプルで新しいスクロール背景 - こじょらぼ
背景画像のトップとボトムが、ページのトップとボトムと一致するように、 ページの長さに応じてスクロール量が変化する背景を設定する方法です。 ページのスクロールとは独立して(ページの縦幅に関係なく)、背景は背景画像の高さ(height)までしかスクロールしません。 ちょっと前から主流の fixed や、伝統の scroll に並ぶ、 新しい種類の背景(background-attachment)と言えるのではないでしょうか！ 特徴 繰り返さない一枚絵の美しさと、ユーザーの操作に応えるインタラクションを兼ね備えています。 パララックス効果を使った背景よりもシンプルです。 実装もシンプルで比較的 簡単です。 サンプルページ 当ブログのトップページがサンプルです。 コンテンツのスクロール量と、背景のスクロール量に注目。 スクロール バーでスクロールさせると、滑らかで分かりやすいかも知れません。 続き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
