project detail
Demo Gallery Site
Overview
Adobe XDで提供されたデザインカンプをもとに、HTML / CSS / JavaScriptでコーディングした架空のギャラリーサイトです。
トップ画像はスクロールに合わせて拡大・縮小するアニメーションを実装し、訪問者の目を引く印象的なファーストビューを実現しました。Accessセクションでは背景画像がスクロールに連動して表示され、jQueryのinviewプラグインを活用したスクロールアニメーションでコンテンツを演出しています。
Points
- Adobe XDのデザインカンプを忠実に再現したコーディング
- jQueryでトップ画像のスクロール連動拡大・縮小を実装
- inviewプラグインを活用したスクロールアニメーション
- スクロール位置に応じてサイドボタンを表示・非表示
- レスポンシブ対応でモバイルでも快適に閲覧可能
デザインカンプの再現度を意識しながら、スクロールに連動したインタラクションを加えることで、静的なデザインに動きと奥行きを持たせることを心がけました。
制作会社様のコーディングパートナーとして
HTML / CSS / JavaScript / WordPress のコーディング業務をサポートしています。
案件のご相談などお気軽にお問い合わせください。