独自の装飾・アニメーション系

キャプチャ画像

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


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

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

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

 

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

 

※わかりにくかった場合はブラウザをリロードするか、一度画面外にスクロールして戻ってくることでも再確認できます。

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

 

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

※マーカー色は黄色で表示速度は終わりに近づくにつれて次第にゆっくり目になる。

 

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

※マーカーの表示速度が最初から最後まで一定のスピード

 

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

※マーカーが表示されるスピードは早くしたり遅くしたりが調整可能

 

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

※マーカーの表示高さ(マーカーの太さ)は”ある程度は”調整可能

 

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

※マーカーの色は好きな色に調整可能

機能の有効化

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

 

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

 

なおデフォルトの設定ではマーカー部分が一度画面外に消えてもまた表示された際には再度同じアニメーションが繰り返されます。

 

これがウザいと感じる方は一度アニメーションしたらその後はページ遷移が行われない限りそのページ内では二度とアニメーションしないという設定にも変更できます。

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

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

 

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

 

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

(※スクリプトは使わず専用スタイルのみの設定)

 

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

(ただし光るエフェクトは常時繰り返し表示になり変更は不可です)

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

 

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

 

通常のボタンリンク

 

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

 

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

 

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

 この記事をシェア