物理的な実在感を抱かせるポップな表現がおもしろいスライダー実装 Smooothy のウェブサイト
プルプルというかフワフワというか
今回ご紹介するのは Smooothy というプロジェクトのウェブサイトです。
こちらはいわゆる横方向にスクロールするスライダーを実装するためのライブラリのウェブサイトで、ライブラリの実装についてはソースコードも公開されています。
個人で開発されたプロジェクトなのかなと思いますが、実際にそれらを利用したスムーズな水平スクロールの実装を見ることができます。
リンク：
いわゆるスムーススクロールなカルーセル
日本のウェブ制作界隈では、たまにカルーセルについて議論が白熱している場面を見かけることがあるように思いますが世界的にはどうなんでしょうか。
今回の実装は要するに見た目的にはカルーセルに近いものだと思うのですが、公開されているソースコードのリポジトリ、その Readme を読んでみると……
WebGL でそのような表現を行いたかったが思うようなパフォーマンスが既存の実装ではなかなか出なかったので自作するに至った、といったようなことが書かれていますね。
サイトの冒頭部分には、たくさんの 3D モデルがカルーセルのように横に並べられた場面が置かれています。
静止画で見てもわかりにくいかもしれないですが、すべての食べ物や食材は 3D モデルになっており、絶えずアニメーションしています。
圧巻はマウスで掴んで横方向にスクロールしたときで、3D モデルを含む WebGL の描画部分が慣性によって歪むようになっています。
いやこれ、静止画で見ててもそのすごさがまったく伝わらないんじゃないかと思います。
実際に動いている様子はとてもなめらかで、その柔らかい素材感は思わず視線を吸い寄せる魅力があります。
スライダー部分、つまりカルーセルのように無限スクロールする部分よりも、WebGL によって表現されているインタラクション部分についつい目が向いてしまいますね……
カルーセルとかって実際に作ってみると実は考えないといけないことが多くて、実装難易度が見かける頻度に対して高いものの１つだと思います。
もちろん、デザイン的な観点や UI/UX 的な観点でカルーセルに関していろいろ考えるべきことはあるのだと思いますが、このライブラリが WebGL と共存させることを出発点にして作られているというのは面白いなと個人的には感じました。
ライブラリの中身や機能は実際に使ってみないとわからない部分も多そうですが、今回のサイトのデザインやインタラクションは普通に見ていて参考になりますね。
ぜひチェックしてみてください。
