【Three.js】スクロールでぐにゃぐにゃする画像を実装する

関連記事

【Three.js】スクロールでぐにゃぐにゃする画像を実装する

はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen (0.5x を押すと見やすいで...概要を表示 はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen (0.5x を押すと見やすいです) ▼ 2021年7月26日 追記 CodePen( 慣性スクロールありバージョン) 海外のデザインアワードを受賞するようなリッチなサイトで良く見る演出(個人的主観)です。WebGLの汎用的な表現な気がしますが、その実装方法を解説する記事は(少なくとも日本語では)ほとんど見つけられなかったので、自分の勉強も兼ねて書くことにしました。ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです。実装はThree.jsを用いています。 注意事項 想定する読者 Three.jsを触ってみたが、サイト制作に活かす術が分からない、同様の表現を良く見るけどどうやって実装しているか分からない、といった方を対象としています。従って本記事では、Three.jsの基本的

• three.js
• あとで読む
• WebGL
• javascript
• js
• 表現
• html

ブックマークしたユーザー

• techtech05212024年04月26日 techtech0521
• iww2023年05月19日 iww
• gravity012022年06月21日 gravity01
• team-chan32022年03月03日 team-chan3
• tabarka2021年07月29日 tabarka
• littlefield2021年07月28日 littlefield
• jamjamtan2021年07月28日 jamjamtan
• little_dove11022021年07月28日 little_dove1102
• hasunuma06132021年07月28日 hasunuma0613
• yug12242021年07月28日 yug1224
• daizo11172021年07月28日 daizo1117
• ant_mugi2021年07月28日 ant_mugi
• kazoo_oo2021年07月28日 kazoo_oo
• sabinezu2021年07月28日 sabinezu
• unfini2021年07月28日 unfini
• naari_32021年07月28日 naari_3
• Hiro_Matsuno2021年07月28日 Hiro_Matsuno
• munyaX2021年07月28日 munyaX