ECプロ│ECサイト運営のためのアドバイス情報サイト

こんにちは、イメージデザインの古川です。

以前の記事では、楽天市場やYAHOO!ショッピングのウィンドウ横に固定するバナーを
cssで実装する方法を紹介しましたが、
今回はjsを使った少し動きのある固定バナーを紹介します。
jsの導入なので、iframeを使用する必要があるのが、少し注意です。

iframeの固定

iframeでの固定化が必要なので、まずは要素を固定する方法からおさらいします。

<style>
.fixed{
	position:fixed;/*固定化*/
	left:0;/*左からの位置*/
	top:50px;/*上からの位置*/
        z-index:9999;
}
</style>
<iframe src="○○○.html" width="200" height="200" frameborder="0" scrolling="no" class="fixed"></iframe>

固定させるcssは「position:fixed;」なので、そちらと固定する位置を入力します。
これだけで、固定が完了です。
ページ上では要素の重なりがあるので、「z-index」で優先度を上げています。
今回は「fixed」というクラスをつくって「iframe」にclass=”fixed”と指定しています。

jsプラグインの取得

今回はjsを0から作るのではなく、既に公開されているプラグインを使用します。

必要なものは「wow.js」というもので、下記のURLからダウンロードができます。

https://github.com/matthieua/WOW

赤枠の部分からダウンロードし、zipファイルを解凍して「wow.min.js」というファイルを使用します。

animate.cssの取得

アニメーションのCSSは以前手書きで作成しましたが、実はこれにもプラグインがあり、
今回はそちらをダウンロードして使いたいと思います。

下記のURLからダウンロードを行います。

http://daneden.github.io/animate.css/

赤枠の部分からダウンロードします。

HTMLの作成

HTMLでは、ダウンロードした２つのファイルを読み込み、実行させるためのscriptを記載をします。
動かしたい要素にはclassを設定するだけで完了です。

<link href="css/animate.css" rel="stylesheet">
<script src="js/wow.min.js"></script>
<script>
new WOW().init();//WOWの実行
</script>

<section class="wow slideInLeft" data-wow-delay="3s" data-wow-duration="1s">
  <a href="#"><img src="tip1sample.jpg" width="200" height="200"></a>
</section>

動かしたい要素に「class=”wow slideInLeft”」と入力。
「slideInLeft」は左から出てくるclassです。
「data-wow-delay=”3s” data-wow-duration=”1s”」はアニメーションの制御を行っています。
「data-wow-delay」はアニメーションが動くまでの時間
「data-wow-duration」はアニメーションが動いてから完了までの時間
となります。
つまり、今回はページを開けて３秒後に動いて１秒後に完全に出てくるといったところです。
再読み込みボタンをクリックすれば、出てくる様子がよくわかると思います。

ちょっとプラス

横から出てくるバナーはブラウザの幅によっては邪魔な時もあるので、
その場合に消せるような動きをプラスしました。

<link href="css/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
$(function () {  
     $(".delete").click(function(){
         $(this).parents("section").animate({ opacity: "hide" }, "slow");  
     });  
});  

</script>
section{
	position:relative;
	display:inline-block;
}
span.delete{
	position:absolute;
	cursor:pointer;
	top:0;
	right:0;
	display:inline-block;
	background:#000;
	color:#FFF;
	padding:10px;
	font-size:12px;
	font-weight:bold;
	line-height:1;
	text-decoration:none;
	z-index:999;
}
<section class="wow slideInLeft" data-wow-delay="3s" data-wow-duration="1s">
  <a href="#"><img src="tip1sample.jpg" width="200" height="200"></a>
  <span class="delete">×</span>
</section>

消す動作は「new WOW().init();」の下のjQueryで記載した部分です。
jQueryを使用していますので、

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>