PHP BLOG

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.



By Yuriy Artyukh in Tutorials on April 14, 2020



From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.



I love WebGL, and in this article I will explain one of the cool effects you can make if you master shaders. The effect I want to recreate is originally from Jesper Landberg’s website. He’s a really cool dude, make sure to check out his stuff:



So let’s get to business! Let’s start with this simple HTML:



Couldn’t be any easier! Let’s style it a bit to look prettier:



All the animations will happen in a Canvas element. So now we need to add a bit of JavaScript. I’m using Parcel here, as it’s quite simple to get started with. I’ll use Three.js for the WebGL part.



So let’s add some JavaScript and start with a basic Three.js setup from the official documentation:



--이하생략







출저 : https://tympanus.net/codrops/2020/04/14/interactive-webgl-hover-effects/