光の屈折＆反射を表現したコードスニペット7選【CSS/JavaScript】

光の屈折や反射は、美しい光景を作り出します。そして、JavaScriptやCSSなどの技術を使えばこうした現象をWeb上に再現することが可能です。

今回は、鏡のような反射や光の屈折を再現するコードスニペット7選をご紹介します。

1. Bonsai animation

最初にご紹介するのは、ハイレベルな技術を駆使して、穏やかな雰囲気の盆栽を描く作品です。SVGとアニメーションライブラリGASPを活用して、反射効果を美しく表現しています。

See the Pen Bonsai animation by Kamil (@KamilDyrek) on CodePen.

2. Mirrored Light Orb Cursor Movement

黒い背景に、鮮やかに光る球体が2つ配置されています。カーソルを動かすと左側の光が操作でき、もう片方の光が動きを鏡のように模倣するという仕組みです。

See the Pen Mirrored Light Orb Cursor Movement by Diana Le (@pursuitofleisure) on CodePen.

3. GLSL: Refracted rays

カーソルを動かすと光の屈折率が変化し、こちらに向かってくる球体がさまざまなデザインに変化します。色彩と質感が特徴的で、ガラスのようなものから、テレビの砂嵐を連想させるものまで、デザインはさまざまです。HTML5の<canvas>タグとJavaScriptを使い、なめらかな動きを実現しています。

See the Pen GLSL: Refracted rays by Liam Egan (@shubniggurath) on CodePen.

4. Pure CSS text mirror

文字の反射は、数十行のCSSのみで簡単に実装可能です。CSSのtansformプロパティを活用することで、ミラーリングした文字を上下に反転させることができるのです。そこにグラデーションをかければ、よりリアルな仕上がりになります。

See the Pen Pure css text mirror by Tim (@imbaniac) on CodePen.

5. Text Refraction

このスニペットの特徴は、文字を編集できる点です。水晶玉をとおしたような効果を、任意の文字につけられます。カーソルを動かして、遠近感や大きさを調整することも可能です。カラフルな背景と組み合わせて、1960年代風に仕上げてみましょう。

See the Pen Text Refraction by Juan Fuentes (@JuanFuentes) on CodePen.

6. Phone Reflection

携帯電話をぼんやり眺めている女性をモチーフにしたスニペット。携帯電話をクリックすると、人物に映るものが変わります。映画館にいるような雰囲気が印象的です。

See the Pen Phone Reflection by luke lincoln (@lukes611) on CodePen.

7. Three.js Reflection

ゲームボードの上で、鏡面仕上げの球体がゆっくりと動いています。視点を変えて特殊効果をさまざまな角度から楽しむことも可能です。

See the Pen Three.js Reflection by seanwasere (@seanwasere) on CodePen.

おわりに

物理法則とデザイン、そして技術をうまく組み合わせることで、すばらしい作品を生み出せます。技術や知識にアイデアをプラスして、ユニークな作品を作ってみましょう。

（執筆： Eric Karkovack　翻訳：Asuka Nakajima　編集：泉　提供元：speckyboy）