[JS]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS

サイト構築 -JavaScript

Post on:2014年6月23日

sponsorsr

シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。

表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。

Amaran JS
Amaran JS -GitHub

Amaran JSのデモ
Amaran JSの使い方

Amaran JSのデモ

デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。
↓は上：ユーザースタイル、下：半透明スタイル

デモページ

オプションでは、パネル表示にタイマー機能、スクロールしても定位置に表示されるスティッキー機能などもあります。

デモページ：オプション

Amaran JSの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/jquery.amaran.min.css">
  <link rel="stylesheet" href="css/themes/all-themes.css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="js/jquery.amaran.js"></script>
</body>

Font Awesomeのアイコンを使用する時は、スタイルシートを加えます。

<head>
  ...
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>

Step 2: JavaScript

メッセージのパネルはスクリプトで制御します。
まずは基本書式、簡単なテキストだけでのパネルを表示します。

$(function(){
    $.amaran({'message':'My first example!'});
});

上：テキストのみ、下：ユーザーテーマ

今度は画像をサークル状に表示します。

$.amaran({
    content:{
        img:'http://api.randomuser.me/0.2/portraits/men/21.jpg'
    },
    theme:'rounded'
});

アイコンやテーマを使用するして、凝ったレイアウトで表示することも簡単です。

$.amaran({
    content:{
        message:'My first funcy example!',
        size:'1.4 GB',
        file:'my_birthday.mp4',
        icon:'fa fa-download'
    },
    theme:'default ok'
});

パネルはさまざまなデザインが用意されており、簡単に利用できます。オリジナルのテーマを作ることもできます。