こんにちは、イメージデザインの古川です。
以前の記事では、楽天市場や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では、ダウンロードした2つのファイルを読み込み、実行させるための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」はアニメーションが動いてから完了までの時間
となります。
つまり、今回はページを開けて3秒後に動いて1秒後に完全に出てくるといったところです。
再読み込みボタンをクリックすれば、出てくる様子がよくわかると思います。
ちょっとプラス
横から出てくるバナーはブラウザの幅によっては邪魔な時もあるので、
その場合に消せるような動きをプラスしました。
<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>でJquery本体を読み込んでいます。