Clone Project

Pixel Distortion Effect

Created by
Charles
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
Description from Webflow:  
The Pixel Distortion Effect. Inspired by Infinite Bad Guy Website (which is no longer active) You can clone and change the following attribute inside the canvasContainer: data-grid (default value: 34), //generate how many grid data-mouse (default value: 0.25), //mouse radius affecting the distortion data-strength (default value: 1), //higher = more parallax and distorted. data-relaxation (default value: .9), //lower = faster pixel re-sorting data-aspectRatio (default value: 1.77), //change Aspect Ratio according to your image size. (default 1920x1080) It is recommended to use landscape images, To calculate aspect ratio, you can do (image pixel width / image pixel height) Have fun messing around! ✌️ NB. There's also native text animation if you wanna try to play around with that one too.
Tags from Webflow: 
threejs,  webgl,  animation,  cool effects
.