デザイン

ニグランが制作するホームページの文字や画像の動き一覧

ホーム » デザイン » ニグランが制作するホームページの文字や画像の動き一覧

今回は、NiGLANの制作するホームページで表現する、画像や文字の動きをご紹介します。
動きをカスタムして欲しい場合、こちらの一覧をご参考にご依頼ください。

1:フリップインX

まず最初はフリップインXです。X軸を中心に文字が揺れます。

ロゴblack

2:フリップインY

続いてフリップインYです。Y軸を中心に文字が揺れます。この際、要素を形成するブロックの中心がY軸となります。

ロゴblack

3:フェードイン

フェードインは半透明の状態から、要素が姿を表します。シンプルですが、もっともよく使われる動きです。

ロゴblack

4:フェードインダウン

フェードインダウンは要素を構成するブロックの上から要素が現れます。こちらもよく使われる動きです。

ロゴblack

5:フェードインレフト

フェードインレフトは要素を構成するブロックの左から要素が現れます。

ロゴblack

6:フェードインライト

フェードインライトは要素を構成するブロックの右から要素が現れます。

ロゴblack

7:フェードインアップ

フェードインアップは要素を構成するブロックの下から要素が現れます。

ロゴblack

8:スライドインダウン

ロゴblack

9:スライドインレフト

ロゴblack

10:スライドインライト

ロゴblack

11:ロールイン

ロゴblack

12:ロールアウト

ロゴblack

13:バウンス

ロゴblack

14:バウンスイン

ロゴblack

15:バウンスインアップ

ロゴblack

16:バウンスインダウン

ロゴblack

17:バウンスインレフト

ロゴblack

18:バウンスインライト

ロゴblack

19:フェードインアップビッグ

ロゴblack

20:フェードインダウンビッグ

ロゴblack

21:フェードインレフトビッグ

ロゴblack

22:フェードインライトビッグ

ロゴblack

23:フラッシュ

ロゴblack

24:フリップ

ロゴblack

25:ライトスピードイン

ロゴblack

26:パルス

ロゴblack

27:ローテートイン

ロゴblack

28:ローテートインアップレフト

ロゴblack

28:ローテートインダウンレフト

ロゴblack

29:ローテートインアップライト

ロゴblack

30:ローテートインダウンライト

ロゴblack

31:シェイク

ロゴblack

32:スイング

ロゴblack

32:Tada!

ロゴblack

33:ウィグル

ロゴblack

34:ワーブル

ロゴblack

35:インファナトゥフジャンプ

ロゴblack

36:ズームイン

ロゴblack

このように、要素に動きを加える事ができます。また、その動作自体の速さ、動作の現れるタイミングを細かく設定できます。

動きをつける目的は、「注目して欲しいポイント」や「長文の箇所で飽きさせない為の工夫」として利用する事が最適です。

動きをつけ過ぎてしまうと、ページの読み込み速度が遅くなってしまい、検索順位を落としてしまう可能性があるので、適度に目的を持って利用する事がポイントです。


田村 健太

NiGLAN代表の田村健太です。ブログ歴8年のSEO知識と経験の元、SEOに強いホームページを制作いたします。私のブログも50万アクセスと個人ブログの中でも上位のアクセス数を勝ち取っているので、安心してお任せください。Illustrator,Photoshopの歴は8年、HTML,CSSの歴は4年となっています。

スポンサーリンク
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound

©︎ニグラン