[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;
}

sponsors

top of page

©2018 coliss