[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル

アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。
実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。

Pop From Top Notification

[ad#ad-2]

下記は各ポイントを意訳したものです。

デモ

デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。

デモページ
※上部のイエローのパネルです。

CSS3アニメーション サポート

アニメーションでパネルがスライド表示され、アニメーションで隠れます。

CSS3アニメーション 非サポート

スタティックにパネルが表示され、クローズボタンのクリックで隠れます。

実装：パネルをブラウザ上部に配置

まずは、パネルをブラウザの上部に配置します。

HTML

パネルはdiv要素で実装します。

<div id="note">
    You smell good.
</div>

CSS

パネルをブラウザの上部に配置します。

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

パネルをアニメーション

キーフレームを使ったアニメーションでパネルをゆっくりとスライドさせます。

CSS

スライドダウンのアニメーションを設定します。

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

ブラウザごとの最適化

CSS3アニメーションをサポートするブラウザ、非サポートブラウザへの対応をしています。

CSS

「Modernize」を使用して、CSS3アニメーションをサポートするブラウザのみアニメーションを実行するようにします。

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

アニメーションが始まる前に1.0sをもたせました。
これはワンテンポ遅らせて、通知パネルをより目立たせるための演出です。

[ad#ad-2]

次に、パネルにクローズボタンを加えてみます。

HTML

パネルのHTMLにクローズボタンを加えます。

<div id="note">
    You smell good. <a id="close">[close]</a>
</div>

JavaScript

アニメーションに非対応のブラウザでパネルを閉じることができるようJavaScriptで記述します。

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

CSS

最後に、アニメーションをサポートするブラウザではクローズボタンは必要ないので、隠します。

.cssanimations.csstransforms #close {
  display: none;
}