「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
光の屈折や反射は、美しい光景を作り出します。そして、JavaScriptやCSSなどの技術を使えばこうした現象をWeb上に再現することが可能です。
今回は、鏡のような反射や光の屈折を再現するコードスニペット7選をご紹介します。
目次
最初にご紹介するのは、ハイレベルな技術を駆使して、穏やかな雰囲気の盆栽を描く作品です。SVGとアニメーションライブラリGASPを活用して、反射効果を美しく表現しています。
See the Pen Bonsai animation by Kamil (@KamilDyrek) on CodePen.
黒い背景に、鮮やかに光る球体が2つ配置されています。カーソルを動かすと左側の光が操作でき、もう片方の光が動きを鏡のように模倣するという仕組みです。
See the Pen Mirrored Light Orb Cursor Movement by Diana Le (@pursuitofleisure) on CodePen.
カーソルを動かすと光の屈折率が変化し、こちらに向かってくる球体がさまざまなデザインに変化します。色彩と質感が特徴的で、ガラスのようなものから、テレビの砂嵐を連想させるものまで、デザインはさまざまです。HTML5の<canvas>タグとJavaScriptを使い、なめらかな動きを実現しています。
See the Pen GLSL: Refracted rays by Liam Egan (@shubniggurath) on CodePen.
文字の反射は、数十行のCSSのみで簡単に実装可能です。CSSのtansformプロパティを活用することで、ミラーリングした文字を上下に反転させることができるのです。そこにグラデーションをかければ、よりリアルな仕上がりになります。
See the Pen Pure css text mirror by Tim (@imbaniac) on CodePen.
このスニペットの特徴は、文字を編集できる点です。水晶玉をとおしたような効果を、任意の文字につけられます。カーソルを動かして、遠近感や大きさを調整することも可能です。カラフルな背景と組み合わせて、1960年代風に仕上げてみましょう。
See the Pen Text Refraction by Juan Fuentes (@JuanFuentes) on CodePen.
携帯電話をぼんやり眺めている女性をモチーフにしたスニペット。携帯電話をクリックすると、人物に映るものが変わります。映画館にいるような雰囲気が印象的です。
See the Pen Phone Reflection by luke lincoln (@lukes611) on CodePen.
ゲームボードの上で、鏡面仕上げの球体がゆっくりと動いています。視点を変えて特殊効果をさまざまな角度から楽しむことも可能です。
See the Pen Three.js Reflection by seanwasere (@seanwasere) on CodePen.
物理法則とデザイン、そして技術をうまく組み合わせることで、すばらしい作品を生み出せます。技術や知識にアイデアをプラスして、ユニークな作品を作ってみましょう。
(執筆: Eric Karkovack 翻訳:Asuka Nakajima 編集:泉 提供元:speckyboy)
画面分割(スプリットレイアウト)を導入したWebデザイン8事例
Workship MAGAZINE
初心者でも簡単実装!ドロップダウンリストのコードスニペット10選【CSS/JavaScript】
Workship MAGAZINE
思わず見惚れるページ遷移アニメーション事例10選【CSS/JavaScript】
Workship MAGAZINE