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

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

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

サイトのキャプチャ

Amaran JS
Amaran JS -GitHub

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'
});

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

デモのキャプチャ

用意されているユーザーテーマ

さらに詳しい実装方法は、下記ページを参考にしてください。

sponsors

top of page

©2024 coliss