3Dカバーフロー型カルーセルのイメージギャラリー

note

Apple製品のGUIでお馴染みのカバーフローをWebGL技術で再現したカルーセルUIのイメージギャラリーです。左右へのドラッグ操作で、傾いたイメージ写真が次々と切り替わり、操作性の高いインタラクティブなUIを実現しています。各アイテムには鏡面反射エフェクトを適用し、リッチなデザインに仕上げています。

複数の板状ポリゴンをx軸上に配置し、中心以外のアイテムをy軸方向に回転させて配置します。各板ポリゴンを複製して底辺を軸に90度反転させ、カスタムシェーダーによるグラデーションマスクで鏡面反射エフェクトを実現しています。ドラッグ処理では、ドラッグ量に応じてインデックスを更新し、アイテムの並び順を動的に変更します。移動や回転の座標変化は、Three.jsのlerpメソッドによる線形補間で滑らかなアニメーションを実現しています。

近年ではあまり見かけませんが、洗練された動きやレイアウトデザイン、そしてユーザーの操作感はUIデザインの重要なアクセントになります。ビジュアルイメージやポートレート写真をより印象的に演出できます。

【使用ライブラリ】 Three.js