Back to packageRELEASE DETAILS

0.1.1

npm

3d-image

Small, dependency-free library for creating 3D image effect on your website (like seen on Facebook)

Published21 Jul 2019

Direct dependencies5

Transitive dependenciesNot calculated

README

Current package documentation

🏄 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:

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 5

Native requirements

5 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
ts-loader Environment { "local_name": "ts-loader", "alias": false, "peer_metadata": null }	`^6.0.4`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^3.5.3`	development
webpack Environment { "local_name": "webpack", "alias": false, "peer_metadata": null }	`^4.36.1`	development
webpack-cli Environment { "local_name": "webpack-cli", "alias": false, "peer_metadata": null }	`^3.3.6`	development
webpack-dev-server Environment { "local_name": "webpack-dev-server", "alias": false, "peer_metadata": null }	`^3.7.2`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-12ojF1UDNOBdpj9a702chSmjNCg2wGFgv6GTqviEIwbjZJ55rrX0+aHTKmRKcrJLxfdawIYh37ITzbAvHKtfwg==",
  "shasum": "1beff29a35ae6f04cb9a84257ba6d104c58b2835",
  "tarball": "https://registry.npmjs.org/3d-image/-/3d-image-0.1.1.tgz",
  "fileCount": 46,
  "unpackedSize": 3008334,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNKcJCRA9TVsSAnZWagAA2fEP/jFd0aj/9PHBLLdF/qGu\nEm2a5hMEQCEkjkeIyFuvsCKgEoE1Nqvb8VyMpihTXxGtI2vRqrJlZLPXBa6o\nM/WrG6LhSVllOyhLJ0iT9cyNiyWFptsMF2IdUnjVmc/WXAbnO0tL3jX4BB+j\nX/GVOIY2OAuNCgyoQbnfV+1LzJBX2JSQpbsFf9NMg8TZ74E9Rf+L4dTrcnPW\nJuSFdl9DT/0mj1oRE0V1bl5NzE0bfMf7d/Np+6Ds/LmMsRA/w3u0Mq48m7xx\niS+2FluA3/jlvoyXqXQzj19FisBYjVNyWdqs8mjXhqzkeh902BzJajpCl1u1\noklZ6Qp1eXdEXm1pkoFkqQVfDsPFA4gx5uB1kD8cP4s3XWh237OAzG2jMHhJ\nl6or79LK6HDL6J1KUTXqcljlUIHof97ho1U8vQzctHVEWlki2/WcDGRNjpmu\ng32K5mDbZL28UKp4yevEIzgdVbuR0s46TV5qyLt/XWUPn3MhhEGao+lU2LHh\nAK1qIsRsL9P2jZIWtSKpXs9h8Gd4B+LTl5kz2FyRLqJnXkjF3EhY6uwXIk2F\njh18TXaCECtYwt4kBnwosmtFz43dNqynvRjrbpXgtkm8yfQdKzD2ktWaSlCR\nIivbo27ZDNFDSi5p3KivXfv1/0mqBBM8IfS4/1dMp6nsVYbzEr1aLjOELmhc\net43\r\n=9CSO\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEQCICW86BnSLz0pLsMQ7JpZ8Y2VAzcUpUQgyX/EHDyb2Cn6AiB+t+zvgeyH7udvopyQBd/38c2E29KQijnlVQyLJAC3yA=="
    }
  ]
}

Repository

PENDING

arturbien/3d-image

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 19:36 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:67f9a527ede71ed090b2dcb2c3d465482527bfebb7c8cfb52d85fc4b8e0b766e

Other collected versions

0.1.021 Jul View all collected versions →