ダークモード

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

DarkMode確認用-アニメーションするマーカー

キャプチャ画像

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

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


アニメマーカー

まずはDEMOをご覧下さい。

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

設定

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

 

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

 

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

 

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

 

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

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

 

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

以上です。