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

光の屈折&反射を表現したWebデザイン7事例
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

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

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

1. Bonsai animation

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

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

2. Mirrored Light Orb Cursor Movement

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

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

3. GLSL: Refracted rays

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

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

4. Pure CSS text mirror

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

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

5. Text Refraction

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

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

6. Phone Reflection

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

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

7. Three.js Reflection

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

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

おわりに

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

(執筆: Eric Karkovack 翻訳:Asuka Nakajima 編集:泉 提供元:speckyboy

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
Workship ad 2