※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

【Volar】独自の装飾機能・アニメーション系

キャプチャ画像

装飾機能の一つとして動きを伴うアニメーション効果があります。

 

【Volar】では単なる強調ではなくよりサイト訪問者の目を引かせるための方策の一つとして、アニメーション装飾機能をいくつか搭載してます。


左から右に伸びるマーカー下線

マーカーや下線等はそれだけでも目立つものですが、もっと目立たせたいときに使える”動きを伴った”マーカー下線をご用意しました。

デフォルトではアニメーションするマーカー機能はOFFになってます。

 

概要

まずはDEMOをご覧下さい。

 

スクロールして視界に入ったらマーカーが左から右に動き出します。

 

といってもここを表示した瞬間に、下のアニメーションするマーカー下線がご覧になれてますよね。

(ブラウザをリロードするか、一度画面外に外して戻ってくることでも再確認できます)

PC上での表示と比べてiPhone(スマホ)では線の太さが若干細くなります。

 

アニメーションするマーカー(デフォルト)

 

アニメーションするマーカー(一定の速度)

 

アニメーションするマーカー(スピードゆっくりめ)

 

アニメーションするマーカー(太目)

 

アニメーションするマーカー(色違い)

 

機能の有効化

アニメーションするマーカーは簡単なスクリプトといくつかのスタイルの2つで構成されてます。

 

もちろんそれらの設定はすでに【Volar】に搭載済みなので、あなたはスクリプトを有効化させることと、アニメーションするマーカーを設定したいテキストに”animation_marker”というクラス名を付与するだけです。

 

スクリプトはSIRIUSのテンプレートごとに有効化する方法と、使用するページのみ有効化する方法の2種類があります。

 

スタイルはすでに組み込んであるので、(カスタマイズしない限りは)あなたは何もする必要はありません。

 

なおDEMOでは5種類のタイプをご紹介してますが、それ自体があなたがカスタマイズ可能な項目になります。

(※DEMOでは表示しきれなかった項目を含めると実際には6項目あります)

 

  1. デフォルト→マーカー色は黄色で表示速度は終わりに近づくにつれて次第にゆっくり目になります。
  2. 一定の速度→マーカーの表示速度が最初から最後まで一定のスピードになります。
  3. スピードゆっくり目→マーカーが表示されるスピードは、早くしたり遅くしたりが調整可能です。
  4. 太目マーカーの表示高さ(マーカーの太さ)はある程度は調整可能です。
  5. 色違いマーカーの色は好きな色に変えられます。
  6. 繰り返し表示のON・OFF→デフォルトの設定ではマーカー部分が一度画面外に消えてもまた表示された際には再度同じアニメーションが繰り返されます。
    これがウザいと感じる方は、一度アニメーションしたらその後はページ遷移が行われない限り、そのページ内では二度とアニメーションしないという設定にも変更できます。

キラリと光るボタンリンク

「公式サイトはコチラ」といったような画像リンクで”キラッと光る”パターンのモノをあなたも見たことがあるでしょう。

 

あれはボタン画像を目立たせることで少しでも多くボタンをクリックさせることを目的に搭載されてる機能なんですね。

 

【Volar】にもその機能を搭載してます。

 

ただしあまりひんぱんにキラキラさせてもウザがられるだけでしょうから、その辺は多少カスタマイズしてあります。

この機能はSIRIUS上位版の機能であるボタンリンクのみに適用可となってます。

 

使い方

この機能は専用のクラスをちゃちゃっと付加するだけですぐに機能が発動します。

 

コチラ↓のサンプル版はクリックしても何も起きません。

 

通常のボタンリンク

 

キラリと光るボタンリンク(標準速度)

 

キラリと光るボタンリンク(ゆっくりめ)

 

キラリと光るボタンリンク(速め)

 

光るスピード(※間隔も連動)のみ調整が可能です。

 

 

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア