3d-image 中文文档教程
3D-image
小型（压缩后 4.35KB）、无依赖库，用于在您的网站上创建 3D 图像效果（就像在 Facebook 上一样！）。
- reacts to mouse move / mobile device movement! ????
- based on WebGL
How to use
首先，您需要 2 张图片：原始图片和深度图片：
然后，用 data-src 和 data 准备图像插槽-depth-src 属性包含这些图像的路径：
<div id="coke" data-src="path to original image" data-depth-src="path to depth image"></div>
最后，添加 3D-image 库并像这样运行它：
<script src="https://unpkg.com/3d-image"></script>
<script>
var coke = document.getElementById("coke");
image3D.process(coke);
</script>
That's it! ????
免责声明： 这个库是一个工作-正在进行中，因此 API 可能会更改。 将添加更多选项，例如：
- increasing and decreasing 3D effect strength
- reacting to scroll events for devices not supporting DeviceOrientation API
???? 3D-image
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:
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
更多
