3d-image

0.1.1 • Public • Published

🏄 3D-image

NPM 3d-image version R3d-image license

Small (4.35KB gzipped), dependency-free library for creating 3D image effect on your website ( just like on Facebook! ).

  • reacts to mouse move / mobile device movement! 🤳
  • based on WebGL

How to use

First, you need 2 images: original image, and depth image:

coke

Then, prepare image slot with data-src and data-depth-src attributes containing paths to those images:

<div id="coke" 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 coke = document.getElementById("coke");
    image3D.process(coke);
</script> 
 

That's it! 🥤

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

Package Sidebar

Install

npm i 3d-image

Weekly Downloads

14

Version

0.1.1

License

ISC

Unpacked Size

3.01 MB

Total Files

46

Last publish

Collaborators

  • arturbien