jQueryで画像のフェードインとスライドダウンを同時に行う方法
jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に２つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。
「 CSS 」一覧
CSSやjQueryで要素をアニメーションさせて表示する２つの方法
要素にフェードインなどのアニメ効果をつけながら表示するには２つ方法があります。１つめはjQueryのアニメ関数を使う方法で、２つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの２つのやり方で要素をアニメ表示する方法を解説します。
jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法
jQueryで要素をアニメーションさせるにはanimate関数が使われますが、この関数内ではtransformプロパティを時間に沿ってアニメーションさせることはできません。なので代わりにtransitionプロパティを要素に指定してアニメーションさせます。ここではその方法と移動・拡大・回転・傾斜アニメを要素につける方法を解説します。
jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法
jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。
jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法
CSS3では要素にアニメーション効果をつけるアニメーションプロパティを使うと要素に対して様々なアニメーション効果をつけられるようになりました。ここではそのアニメーションプロパティとjQueryを使って１つ１つの文字がばらばらに上下に揺れるようなアニメーション効果をつける方法について解説します。
画面をスクロールすると追従してくるボタンをCSSだけで作る方法
画面をスクロールするとそれに追従するようなボタンはCSSだけで作ることが可能です。作り方はとても簡単でPCやスマホの表示領域(viewport)に対して位置を固定するようにpositionプロパティと位置を調整するだけです。ここではその作り方とスクリプトと組み合わせて記事トップに戻るボタンを作る方法などを解説します。
preタグ内のソースコードを画面端で折り返す方法
ソースコードの表示にはpreタグとcodeタグが使われますが、preタグは文章の内容をそのまま表示する要素なので１行が長いコードだとスクロールバーが表示されてしまいます。そこでpreタグにCSSを適用してソースコードが要素の端まで来た時に自動で改行を入れて折り返す方法について解説します。
要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例
何か動作があった時にただ要素を表示するだけでなく回転や拡大などのアニメーション効果をつけるとユーザーに興味を持ってもらいやすくなります。ここではCSSのtransformプロパティとjQueryのcss関数を使って要素に変形効果をつけ、ユニークなアニメ表示をする方法と実際のアニメ表示の例について紹介します。
画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法
従来のCSSでしましまの枠線などを作ろうとすると縞模様の画像をリピートさせる方法しかありませんでした。しかしCSSで追加されたrepeating-linear-gradientプロパティを使うと画像を使うことなくきれいな縞模様のついた枠線や区切り線を作ることが可能です。ここではそのような枠線の作り方を解説します。
CSSだけで作れるオシャレな枠線・区切り線デザインまとめ
枠線や区切り線を変えるとサイトがオシャレになったり、読者の注目を引いてに大事な部分を読んでもらいやすくなるなどの効果があります。そこでここではCSSだけでグラデーションやシマシマ模様のついた枠線や区切り線を作る方法について解説します。もし気に入ったデザインがあればコピー・改変して使ってください。