動的なグリッドレイアウトのWebページテンプレートのご紹介

本記事では、任意のグラフィックスをグリッドレイアウトできるWebページテンプレートをご紹介します。

ポートレートサイトなどビジュアルを重視したWebサイトを作成したい方は、ぜひ参考にしてくださいね。

グリッドレイアウトのWebページテンプレート概要

メニュー画面

グリッドレイアウトとは、グラフィックスなどの各要素を格子状に組み合わせる表現です。昨今のWebページの制作ではよく使われる手法のひとつです。

今回ご紹介するテンプレートのメニュー画面では、メニューが前面に表示されており、バックグラウンドにグラフィックスがランダムに配置されています。

GIF

別のメニューを選択すると、選択したメニューに合わせて背景のグラフィックスが上下に遷移します。

なお、こちらのテンプレート上で使われているアニメーションツールは『TweenMax』です。最新のCSS GridやCSSカスタムが使用されています。古いブラウザではサポートされない可能性がありますのでご注意ください。

グラフィックスをメイン表示したいときは

グラフィックス

▲「explore」をクリックすると各グラフィックスが拡大され明るくなる

選択中メニューの右側に表示される「explore」をクリックすると、アニメーション付きで画面がなめらかに遷移し、背景に表示されていたグラフィックスが前面に一覧表示されます。ここでグラフィックスは、ランダム表示からグリッドレイアウト表示に切り替わります。

また、ページの下部にテキストコンテンツをいれることもできます。

ページ最上部の「←」をクリックするとグラフィックスは再びバックグラウンドと一体化し、メニュー画面に戻ります。

まとめ

以上、グリッドレイアウトのWebページテンプレートをご紹介しました。

こちらのテンプレートが気に入った方は、ぜひお使いください。

(著者:Mary Lou 翻訳:Annie)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship