https://github.com/chrisburnell/instant-photo

A Web Component for presenting an img like an instant photograph.
https://github.com/chrisburnell/instant-photo

custom-element custom-elements customelement customelements javascript web-component web-components webcomponent webcomponents

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/chrisburnell/instant-photo
• Owner: chrisburnell
• License: mit
• Created: 2024-01-21T06:27:48.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-01-24T06:33:42.000Z (8 months ago)
• Last Synced: 2024-05-01T14:16:03.362Z (5 months ago)
• Topics: custom-element, custom-elements, customelement, customelements, javascript, web-component, web-components, webcomponent, webcomponents
• Language: JavaScript
• Homepage: https://chrisburnell.com/instant-photo
• Size: 14.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# `instant-photo`

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

**[Demo](https://chrisburnell.github.io/instant-photo/demo.html)** | **[Further reading](https://chrisburnell.com/instant-photo/)**

## Examples

General usage example:

```html

  

```

Example setting the image to develop over time:

```html

  

```

## 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](https://www.npmjs.com/package/@chrisburnell/instant-photo): `npm install @chrisburnell/instant-photo`

1. [Download the source manually from GitHub](https://github.com/chrisburnell/instant-photo/releases) into your project.

1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

### Usage

Make sure you include the `` in your project (choose one of these):

```html

<!-- Host yourself -->

<script type="module" src="instant-photo.js">

```

```html

```

```html

```

## Credit

With thanks to the following people:

- [David Darnes](https://darn.es) for creating this [Web Component repo template](https://github.com/daviddarnes/component-template)