【CSS/JS】もっと目立たせて欲しいと言われた場合のTipsまとめ

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。

Photo credit: mari ce / Foter / CC BY-NC-ND

回転させる

• 【CSS3】要素をクルクル回転させる。
• [CSS]シャドウもくるっと！ふわりと浮かせた画像をくるっと回転させるスタイルシート

テキストをシャッフル

• HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」
• テキストをシャッフルしながら表示するjQueryプラグインを試してみた。

揺らす

• [CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート

光らせる

• [CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート

ブルブルさせる

• 要素をブルブルさせるjQueryプラグイン「jRumble」

マウスオーバーで画像を拡大したり縮小

• CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう

マウスオーバーすると全体的にピカーン

• jQueryでマウスオーバーすると全体的にピカーンってなるやつ

雪を降らせる

• 雪を降らせるJavaScript
• 3Dで雪を降らせるJava Script「Snow in 3D」を設置してみた

クリックすると輪っかが広がる

• pointer.js – クリックに楽しみを –
• [jQuery]クリックすると、ほわんと広がる輪っか。pointer.jsを実装してみた！

ページめくり表現

• ページをめくる表現を与えられるJavaScript「Useful Peel Back With jQuery」
• Useful Peel Back With jQuery
• デモ

先頭の文字だけ大きくする

• 第5回　CSSでドロップキャップ（先頭文字を大きくする）

影を動かす

• [JS]ふんわりとした美しい影をエレメントに与えるスクリプト -Real Shadow

色が移り変わる背景

• CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう｜Webクリエイターボックス

背景画像を動かす

• 指定した範囲の背景を動かしちゃうj-query『backgroundPosition』を導入してみた。

ページのアクセス時にモーダル（フロート）を表示する

• 【簡単！】ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js

封筒から出てくる

• css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い