CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう
画像のアニメーションバナーのデモはこちら
必要なもの
・flashystyle.css
↓まとめてダウンロード↓
・デモセットのダウンロード
記述例
HTML
<head>と</head>の間で、cssとjQueryを呼び出す。
<head>
<link rel="stylesheet" type="text/css" href="css/styleflashy.css" />
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var shinyObj = '.button a span.shiny';
var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);
setTimeout('shinybutton()',interval);
}
</script>
</head>バナーを表示したい場所に、下記の記述を。
<div class="button">
<a href="#">
<span class="shiny"></span>
<span class="btn"><img src="img/banner.png" /></span>
</a>
</div>
これだけ。
「#」は、リンク先を指定すること。banner.pngは任意の画像ファイルに変更可能。
フラッシーバナーの解説
var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);・shinySpeed は光のエフェクトが動くスピード
・interval は光のエフェクトが出てこない時間帯の長さ
・{left:’+=630px’},shinySpeed).animate({left:’-120px’} ここは、画像バナーの横幅に合わせて変更すること。
flashystyle.css の
.button a
.button a span.shiny
の2か所の width:、height:、left:、top:、のサイズも画像バナーに合わせて変更すること。
画像のアニメーションバナーのデモはこちら
