「Ajax他」カテゴリーアーカイブ

画像バナーや画像リンクをCSSでキラキラ光らせてアニメーション化し目立たせるフラッシーバナー方法

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:、のサイズも画像バナーに合わせて変更すること。

画像のアニメーションバナーのデモはこちら

FeedPP.pmとTreePP.pmをダウンロードする場所

RSSのCGIなどで使うFeedPP.pmとTreePP.pm

RSSリーダーなどで必要な、FeedPP.pmTreePP.pmを入手。

FeedPP.pm

TreePP.pm


ダウンロードはこちらから。

RSSリーダーなどのPerlスクリプトで必要になる。

サーバーに元々組み込まれている場合もあるが、ない場合はFTPでこの両ファイルをアップロードするなどすれば使う事ができる。

スマホ完全対応、IEも対応のモダンでオシャレなフォトスライダーjQuery

スマホPC対応。オシャレなフォトスライダー、モダンスライド

 

モダンスライドのデモはこちら。

CSSとjQueryだけで導入できる。

レスポンシブ完全対応。

スマホのフリック、PCのマウスクリックしながらのスライドアクション、右下のサムネイルクリック、左右の矢印でスライドを動かすことができる。

また、オートスライドも設定可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

中に入っているもので編集するもの

・js/sequence.js
オートプレイ、エフェクトの切り替え、ループなどの設定が行える。

・css/sequence-theme.modern-slide-in.css
画像の大きさ、読み込む画像の名前などを変更できる。

 
 

HTMLの<head>と</head>の間で読み込む

<link href=”css/sequence-theme.modern-slide-in.css” rel=”stylesheet” media=”all”><!– modern-slide –>
<!–[if lt IE 9]>
<script src=”scripts/respond.min.js”></script>
<![endif]–>

respond.min.js はIE対策用に必要。

順番に注意。
 
 

HTMLのスライダー部分

少し長いが、スライダー3枚分+右下のサムネイル3個分だ。

<div id="sequence" class="seq">

<div class="seq-screen">
<ul class="seq-canvas">

<li class="seq-in">
<div class="seq-model">
<img data-seq src="images/model1.png" alt="モデル1" />
</div>
<div class="seq-title">
<h2 data-seq>Modern Slide In slide1</h2>
<h3 data-seq>スマホ、タブレット、PCに対応しています。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model2.png" alt="モデル2" />
</div>
<div class="seq-title">
<h2 data-seq>slide2</h2>
<h3 data-seq>スマホのフリックでも、PCのクリックしながらのマウスアクションでもスライドしていきます。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model3.png" alt="モデル3" />
</div>
<div class="seq-title">
<h2 data-seq>簡単インストール</h2>
<h3 data-seq>誰でも簡単にインストールできて、カスタマイズも思うがまま。</h3>
</div>
</li>

</ul>
</div>

<fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons">
<button type="button" class="seq-prev" aria-label="Previous">Previous</button>
<button type="button" class="seq-next" aria-label="Next">Next</button>
</fieldset>

<ul role="navigation" aria-label="Pagination" class="seq-pagination">
<li><a href="#step1" rel="step1" title="slide 1へ"><img src="images/tn-model1.png" /></a></li>
<li><a href="#step2" rel="step2" title="slide 2へ"><img src="images/tn-model2.png" /></a></li>
<li><a href="#step3" rel="step3" title="slide 3へ"><img src="images/tn-model3.png" /></a></li>

</ul>
</div>

 
 

画像はデフォルトでは model1.png model2.png ….としている。

 
 

</body>の直前でjsファイルを読み込む

<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.js"></script>
<script src="scripts/sequence-theme.modern-slide-in.js"></script>

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
モダンスライドのデモはこちら。