カスタマイズ-アニメーション

Luxeritasの用意されているカスタマイズでどこまでできるのか見ていくと、カスタマイズ(外観)メニューもたくさんあるようだし、一つ一つメニューを見ても何ができるのか分からないし、その時に分かってもすぐ忘れるので確かめてみているわけですけど、全ての機能を見ていくとかなり微細なところにまで及んでいるのを実感させられます。今回の「カスタマイズ(外観) アニメーション」ではデザインだけでなくマウスオン時のズームイン、ズームアウトも可能になっています。

Luxeritas251スポンサーリンク

サイト名

アニメーション効果なし

Luxeritas260

Luxeritas252
通常状態ではトップページリンクがあるサイト名にマウスを持っていくと、リンクへのマウスオン設定で色が変わったりします。ここに大きさの変更を加えていくのが「アニメーション」という効果です。「アニメーション効果なし」設定なら当然アニメーション効果が無い通常状態のリンクとして表示されています。

ズームイン

Luxeritas261
マウスオンでタイトルはスルスルとだんだん大きくなっていきます。大きさじたいはそれほどでもありませんが、瞬間的に大きくなるのではないのでマウスオンで動きが出ます。

ズームアウト

Luxeritas262
マウスオンでタイトルは小さくくなっていきます。こちらは「ズームイン」の逆バージョンで、スルスル小さくなっていきます。

記事一覧のサムネイル

アニメーション効果なし

Luxeritas253
このサイトはリンクのある画像や文字にマウスがオンになるとピンクにその部分が配色される設定を入れてあるのでいくらか画像の縁などがピンクっぽくなっています。それはアニメーション効果とは無関係です。
「アニメーション効果なし」設定では大きさに変化はありません。

ズームイン

Luxeritas254
サムネイルにマウスオンで大きさが少し変わります。
ヌルヌルと大きくなっていくので、大きさじたいは差異がわかりにくいくらいですが、変化していくので実際はかなり印象に残ります。

ズームアウト

Luxeritas255
サムネイルにマウスオンで大きさが少し変わります。
ヌルヌルと小さくなっていくので、大きさじたいは差異がわかりにくいくらいですが、変化していくので実際はかなり印象に残ります。

SNS シェアボタン

アニメーション効果なし

Luxeritas256
アニメーション効果で大きくしたり小さくしない場合の設定です。

上方移動

Luxeritas263
「上方移動」にチェックを入れて記事下にあるSNSボタンのどれかにマウスカーソル載せます。

Luxeritas257
マウスオンしたSNSボタンがスルスルと少し上昇するアニメーション効果が設定されます。

ズームイン

Luxeritas264
サイト名の「ズームイン」と同じで大きく表示が変わります。

Luxeritas258
マウスオンしたSNSボタンがスルスルと少し大きくなります。画像だとあまり大きくなった変化がわかりにくいくらいですが、だんだん大きくなるので大きさ以上にマウスオンで変化があります。

ズームアウト

Luxeritas265
マウスオンしたSNSボタンがスルスルと少し小さくなります。

Luxeritas266
マウスカーソルを合わせると小さくなっています。

ヘッダーナビ (グローバルナビ)

アニメーション効果なし

Luxeritas267
アニメーション効果で大きくしたり小さくしない場合の設定です。

上方移動

Luxeritas268
上方移動は「SNS シェアボタン」の時と同じようにマウスオンで少し移動が起きます。

Luxeritas259
ヘッダーナビ(グローバルナビ)にマウスオンでスルスルと少し上に上昇します。