Create animated film grain effect in Webflow
For those of you who love film grain effects like 8mm style like me, you will like this technique. This video will show you how to create an animated film grain effect for your website using custom code in Webflow. I will be referencing javascript written by Sarath Saleem posted in GitHub to implement into the website.
––––––––––––––––––––––––––––––––––––––––––
⌨️ Reference Links for codes:
https://github.com/sarathsaleem/grained
https://github.com/Sagameister/animat...
––––––––––––––––––––––––––––––––––––––––––
☕ Show your appreciation by buying me a cup of coffee! 😜
https://www.buymeacoffee.com/desluv
🛒. Here is a breakdown of my gear to make this video:
Stock images:
Elements Envato - https://1.envato.market/9WJ0qy
Microphone to capture my voice:
HyperX QuadCast S - https://amzn.to/3DDEtW0
Dock connectivity:
OWC 14-Port Thunderbolt 3 Dock - https://amzn.to/3jB6dCD
Camera:
Fujifilm XT-3 - https://amzn.to/3zG6bz1
Computer:
Mac Mini - https://amzn.to/3DG7hx3
––––––––––––––––––––––––––––––––––––––––––
Content:
0:00 Intro
0:57 Source Files
1:46 Webflow
6:46 Result for static background image
7:34 Video film grain effect version
9:40 Video film grain effect result