Small (2.5kB gzipped), dependency-free library for creating 3D image effect on your website ( just like on Facebook! ).
- reacts to mouse move / mobile device movement! 🤳 (in iOS Safari "motion & orientation access" has to be enabled)
- based on WebGL shaders
- uses IntersectionObserver to animate only the images that are currently in the viewport
First, you need 2 images: original image, and depth image:
Then, prepare image slot with data-src and data-depth-src attributes containing paths to those images:
<div id="car" data-src="path to original image" data-depth-src="path to depth image"></div>Finally, add 3D-image library and run it like so:
<script src="https://unpkg.com/3d-image"></script>
<script>
var car = document.getElementById("car");
image3D.process(car);
</script>Disclaimer: this library is a work-in-progress, so the API will likely change. There will be more options added like:
- increasing and decreasing 3D effect strength
- reacting to scroll events for devices not supporting DeviceOrientation API
Based on the work of Yuriy Artyukh and Keilyn Nunez.