コンバージョン | あすたまいず

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

必要なもの

　↓まとめてダウンロード↓
・デモセットのダウンロード

記述例

HTML

<head>と</head>の間で、cssとjQueryを呼び出す。

バナーを表示したい場所に、下記の記述を。

これだけ。
「#」は、リンク先を指定すること。banner.pngは任意の画像ファイルに変更可能。

フラッシーバナーの解説

・shinySpeed は光のエフェクトが動くスピード
・interval は光のエフェクトが出てこない時間帯の長さ
・{left:’+=630px’},shinySpeed).animate({left:’-120px’} ここは、画像バナーの横幅に合わせて変更すること。

flashystyle.css の
.button a
.button a span.shiny
の2か所の width:、height:、left:、top:、のサイズも画像バナーに合わせて変更すること。

CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう

　↓まとめてダウンロード↓
・デモセットのダウンロード

HTML

<head>と</head>の間で、cssとフォントを呼び出す。

バナーを表示したい場所に、下記の記述を。

これだけ。
「#」は、リンク先を指定すること。

青いバナー、キラキラ、矢印が動くバナーはこんな感じで↓

青いバナー、キラキラ、矢印が動くバナーのデモはこちら。

赤色で、全てのクラスを指定して動かすアニメーションバナーのデモはこちら

バナーのサイズ、フォントの大きさ、バナーの色やグラデーションをカスタマイズするには、 button.css の各クラスの部分をカスタマイズすればOK。