[Three.js] WebGLピクセル・グリッチ・ノイズ を用いたWebサイトテンプレート

実用性/汎用性のあるWebGLを用いた、テキストや画像を置き換えるだけですぐに使えるWebサイトのテンプレートとアイディアのソースコードをダウンロード販売します。

WebGLは特定のimg画像をスクロールに応じたピクセル・ノイズ・グリッチを演出するものです。

数値を変更するだけでアーティスティックでダイナミックな表現も可能です。

(a.) 大きく歪むグリッチ画像

[PC]

・TOPページ

・下層ページ

[SP]

(b.) [WebGLオプション] ギャラリーレイアウト

※「index2.html」として同封

スクロールによる歪みをなくし、少しのスクロールを検知するとグリッチが最大まで走るように設定

[PC]

[SP]

WebGL応用

数値を少し変更するだけでアーティスティックな表現が可能

・パターンA

・パターンB

サイトの概要

1. 全体

慣性スクロールでぬるぬる動く

2. イントロ

JSで指定した色をランダムで生成し縦線のグリッチ・ノイズを表現

*テンプレートでは3色指定しているが、好みに合わせて増減させることが可能

3. キービジュアル

JSによる文字分割のアニメーションを含め、全8要素のアニメーションを制御に演出

4. WebGL

指定したimg画像のみスクロールの移動方向・移動距離に応じて縦線のグリッチが出現させる

*スクロール中はテキスト要素が0.2透過する仕様にしてある

*画像の歪み具合やグリッチ量、スクロール量に応じたエフェクトの調整が可能

5. ビッグテキスト

文字分割によるテキストのフェードイン演出

6. リスト

JSで下記フェードイン・ホバーアクションを実装

スクロールアニメーション

・横線が伸び、テキストが下から上に移動してフェードイン

ホバーアクション

・横長の背景と横に流れるテキスト表示され、下のリストに移動すると背景が追従してくる

・ホバー箇所の大項目のみ立体に斜体にアニメーションする

・ホバー箇所のサムネイルが斜体からアニメーション表示する

7. お問い合わせ

・メールアドレスをホバーすると文字分割しながら横に移動する

・クリックするとメールアドレスがコピーされ、その旨のポップアップが表示される

8. おまけ - 下層ページ

・写真とテキストを掲載することを想定した汎用ページ

・スクロールに応じてアニメーション表示

9. おまけ - コンタクトページ

・メールアドレスにホバーするとホバーアニメーションする

・アドレスをクリックするとアドレスがコピーされ、その旨のポップアップを表示

10. おまけ - カラーチェンジ (TOPページのみ)

右隅の[Reverse color]ボタンで背景/フォントを白黒で切り替えることができる

README要約

[商品説明]

- Three.jsを用いたWebサイトテンプレート

- 簡易サーバー or Webサーバーで起動

*ローカル環境で起動する場合は、簡易サーバを使用してください

[できること]

- LPやポートフォリオなどにそのまま使用可能

- コンテンツ順番やサイズやデザイン・カラー・サイズをカスタマイズして使用可能

- シェーダーをカスタマイズ可能

- PC / SP対応

[利用条件]

- 商用利用 : 可

- クライアントワーク : 可

- 改変 : 可

- 再配布・再販売 : 不可

- 著作者記載 : 不要

[動作環境]

- macOS Chrome / Safari

- iOS Chrome / Safari

[注意]

Three.jsを大幅にカスタマイズする場合、Three.jsの基礎知識が必要

詳細はREADMEに記載