(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に記載