https://github.com/arturbien/3d-image

🏄 3D images on your website (just like those on Facebook!)
https://github.com/arturbien/3d-image

Last synced: 2 months ago
JSON representation

🏄 3D images on your website (just like those on Facebook!)

• Host: GitHub
• URL: https://github.com/arturbien/3d-image
• Owner: arturbien
• Created: 2019-07-19T20:49:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:56:54.000Z (about 2 years ago)
• Last Synced: 2024-10-12T05:45:17.881Z (3 months ago)
• Language: TypeScript
• Homepage: https://arturbien.github.io/3D-image/
• Size: 1.49 MB
• Stars: 100
• Watchers: 7
• Forks: 10
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# 🏄 3D-image 



  

  

  

  



![car](https://user-images.githubusercontent.com/28541613/61730278-57f78c80-ad79-11e9-826e-71198a75025c.gif)

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"](https://www.youtube.com/watch?time_continue=30&v=ulsqCFMCajY) has to be enabled)

* based on WebGL shaders

* uses IntersectionObserver to animate only the images that are currently in the viewport

## How to use 

First, you need 2 images: original image, and [depth image](https://www.youtube.com/watch?v=eeU5mUASnVI):

![car1](https://user-images.githubusercontent.com/28541613/61730337-73fb2e00-ad79-11e9-8242-fdd093e39f28.jpg)

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

```html



```


Finally, add `3D-image` library and run it like so:

```html

    var car = document.getElementById("car");

    image3D.process(car);

```

### 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

**Based on the work of [Yuriy Artyukh](https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/) and [Keilyn Nunez](https://codepen.io/keilyn3d/full/KLVxZM).**