In this application, the 'threejs plane' is overlaid on the 'dom element' to apply a special effect.
https://nemutas.github.io/ghost-veil/
This application is made up of three layers.
In this layer, the image is displayed and animated in response to scrolling using the GSAP Scroll Trigger.
In this layer, the image source is obtained from the image element of the dom layer, and a grayscale texture is pasted onto the Plane.
In addition, depending on the degree to which the image is displayed, it was expressed as if it were coming down like a dark curtain.
In this layer, the UVs of the screen are distorted and also made transparent in response to mouse movements.
- Three.js
- TypeScript
- GLSL
- GSAP
- Yudouhu Portfolio - created by itoh
- Alien.js - flowmap - created by Patrick Schroen
- WLOP's excellent works
This source code is not MIT License.
❌ Commercial use is prohibited.
❌ Redistribution is prohibited.
❌ Diversion is prohibited.（Incorporate all of the code into the project, etc.）
✅ You can look at the application and reproduce the representation.
✅ You can use parts of the code.