★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 アニメーション 」一覧

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。

CSSやjQueryで要素をアニメーションさせて表示する2つの方法

CSSやjQueryで要素をアニメーションさせて表示する2つの方法

要素にフェードインなどのアニメ効果をつけながら表示するには2つ方法があります。1つめはjQueryのアニメ関数を使う方法で、2つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの2つのやり方で要素をアニメ表示する方法を解説します。

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

CSS3では要素にアニメーション効果をつけるアニメーションプロパティを使うと要素に対して様々なアニメーション効果をつけられるようになりました。ここではそのアニメーションプロパティとjQueryを使って1つ1つの文字がばらばらに上下に揺れるようなアニメーション効果をつける方法について解説します。

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

何か動作があった時にただ要素を表示するだけでなく回転や拡大などのアニメーション効果をつけるとユーザーに興味を持ってもらいやすくなります。ここではCSSのtransformプロパティとjQueryのcss関数を使って要素に変形効果をつけ、ユニークなアニメ表示をする方法と実際のアニメ表示の例について紹介します。