How is this animation done? only CSS?
That is link to a picture on Facebook. Not the CSS animation at all.
hover the pointer over it
I’m using Android phone. With touching it’s not effects.
you could probably do something like this by showing only some of the image and animating it on mouse movements but I think you would need more than css for this.
It uses a depth map (probably using WebGL, I do see a canvas on the page).
https://gist.github.com/bozzin/5895d97130e148e66b88ff4c92535b59
Obviously, if you do not need to drive it using the mouse movement you can just create a video.
Without a depth map you would have to create layers to drive the parallax using some kind of CSS transform.
1 Like