instant-photo

A Web Component for presenting an img like an instant photograph.

Demo | Further reading

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

1. Install via npm: npm install @chrisburnell/instant-photo
2. Download the source manually from GitHub into your project.
3. 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/instant-photo@1.0.0/instant-photo.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/instant-photo@1.0.0"
></script>

Credit

With thanks to the following people:

• David Darnes for creating this Web Component repo template