エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
本記事では、任意のグラフィックスをグリッドレイアウトできるWebページテンプレートをご紹介します。
ポートレートサイトなどビジュアルを重視したWebサイトを作成したい方は、ぜひ参考にしてくださいね。
グリッドレイアウトのWebページテンプレート概要
グリッドレイアウトとは、グラフィックスなどの各要素を格子状に組み合わせる表現です。昨今のWebページの制作ではよく使われる手法のひとつです。
今回ご紹介するテンプレートのメニュー画面では、メニューが前面に表示されており、バックグラウンドにグラフィックスがランダムに配置されています。
別のメニューを選択すると、選択したメニューに合わせて背景のグラフィックスが上下に遷移します。
なお、こちらのテンプレート上で使われているアニメーションツールは『TweenMax』です。最新のCSS GridやCSSカスタムが使用されています。古いブラウザではサポートされない可能性がありますのでご注意ください。
グラフィックスをメイン表示したいときは
▲「explore」をクリックすると各グラフィックスが拡大され明るくなる
選択中メニューの右側に表示される「explore」をクリックすると、アニメーション付きで画面がなめらかに遷移し、背景に表示されていたグラフィックスが前面に一覧表示されます。ここでグラフィックスは、ランダム表示からグリッドレイアウト表示に切り替わります。
また、ページの下部にテキストコンテンツをいれることもできます。
ページ最上部の「←」をクリックするとグラフィックスは再びバックグラウンドと一体化し、メニュー画面に戻ります。
まとめ
以上、グリッドレイアウトのWebページテンプレートをご紹介しました。
こちらのテンプレートが気に入った方は、ぜひお使いください。
（著者：Mary Lou 翻訳：Annie）
こちらもおすすめ！▼
複数枚のスライドを階段状に表示するスライドショーのご紹介
Workship MAGAZINE
スライドアウトボックスメニューという新しいアプローチのご紹介
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.
この記事はcodropsからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Animated Grid Previews
