@chrisburnell/instant-photo
v1.0.1
Published
A Web Component for presenting an img like an instant photograph.
Downloads
3
Maintainers
chrisburnellReadme
instant-photo
A Web Component for presenting an img like an instant photograph.
Examples
General usage example:
<script type="module" src="instant-photo.js"></script>
<instant-photo>
<img src="example.jpg" alt="">
</instant-photo>Example setting the image to develop over time:
<script type="module" src="instant-photo.js"></script>
<instant-photo develop>
<img src="example.jpg" alt="">
</instant-photo>Features
This Web Component presents an img to make it look like an instant photo. With the develop attribute it will “develop” over time after it becomes slightly visible in the browser viewport.
Installation
You have a few options (choose one of these):
- Install via npm:
npm install @chrisburnell/instant-photo - Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
Usage
Make sure you include the <script> in your project (choose one of these):
<!-- Host yourself -->
<script type="module" src="instant-photo.js"></script><!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://www.unpkg.com/@chrisburnell/[email protected]/instant-photo.js"
></script><!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@chrisburnell/[email protected]"
></script>Credit
With thanks to the following people:
- David Darnes for creating this Web Component repo template