Contact us Create app

Directory

← Back

scatter-image

A Polymer 2.0 Custom Element providing a scattered image drawing effect

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/gthmb/scatter-image on 2019-05-22 ]

Published on webcomponents.org

<scatter-image>

Applies a rendering effect to an <img> tag that breaks the image into pieces, scatters, and then reconsitutes them. The <img> tag goes in the image slot.

Demo

Default usage

<scatter-image scatter-on-tap>
    <img slot="image" src="./demo/imgs/path.jpg">
</scatter-image>

Getting fancy

<scatter-image scatter-on-tap no-background resolution="50" composite-operation="screen">
    <img slot="image" src="./demo/imgs/train.jpg">
</scatter-image>

Alt fancy

<scatter-image scatter-on-tap resolution="20" scatter-distance="500" duration="15000">
    <img style="width: 50%;" slot="image" src="./demo/imgs/train.jpg">
</scatter-image>

Configuration Attributes

Attribute Description Type Default
duration The time, in milliseconds, allotted for the animation to complete. Number 1000
resolution The size, in pixels, of the individual chunks of the image. The smaller the resolution the more chunks there are. Adjust as necessary based on image size, performance considerations and/or awesomeness Number 10
scatter-on-tap Enables a tap on the image or canvas to start a new scatter effect. Boolean false
scatter-distance The maximum distance, in pixels, that an individual chunk will start from it's destination. Number 150
no-trails Will clear the canvas on each tick of the animation, which removes the the trailing effect an animating piece will leave as it moves. This generally allows the background to be more distinct during the animation. Boolean false
no-background Hides the img tag during animation, removing the image as a background during the animation. Boolean false
composite-operation Defines the composite operation the canvas should use to while rendering the animation. If a compositeOperation is defined, animation trails are disabled. For current valid values, @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation String null

Read Only, Reflected Attributes.

Attribute Description Type Default
loading Reflects the loading state of the image. True means the image is being loaded. Boolean false
drawing Reflects the drawing state of the animation. True means the the animation is in progress. Boolean false
complete Reflects if the drawing has completed Boolean false

Built with Polymer 2.0

Compatibility

(Loading compatibility data...)

Last updated: 2017-09-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

  • mlisook/resize-aware#^2.0.0
Released
2017-09-01
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

scatter-image - Vaadin Add-on Directory

A Polymer 2.0 Custom Element providing a scattered image drawing effect scatter-image - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/gthmb/scatter-image](https://github.com//gthmb/scatter-image/blob/v0.0.17/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/gthmb/scatter-image) # \ Applies a rendering effect to an `` tag that breaks the image into pieces, scatters, and then reconsitutes them. The `` tag goes in the `image` slot. [Demo](https://www.webcomponents.org/element/gthmb/scatter-image/demo/demo/index.html) ## Default usage ```html ``` ## Getting fancy ```html ``` ## Alt fancy ```html ``` ### Configuration Attributes | Attribute | Description | Type | Default | | --------- | ----------- | ---- | ------- | | `duration` | The time, in milliseconds, allotted for the animation to complete. | `Number` | `1000` | | `resolution` | The size, in pixels, of the individual chunks of the image. The smaller the resolution the more chunks there are. Adjust as necessary based on image size, performance considerations and/or awesomeness | `Number` | `10` | | `scatter-on-tap` | Enables a tap on the image or canvas to start a new scatter effect. | `Boolean` | `false` | | `scatter-distance` | The maximum distance, in pixels, that an individual chunk will start from it's destination. | `Number` | `150` | | `no-trails` | Will clear the canvas on each tick of the animation, which removes the the trailing effect an animating piece will leave as it moves. This generally allows the background to be more distinct during the animation. | `Boolean` | `false` | | `no-background` | Hides the img tag during animation, removing the image as a background during the animation. | `Boolean` | `false` | | `composite-operation` | Defines the composite operation the canvas should use to while rendering the animation. If a compositeOperation is defined, animation trails are disabled. For current valid values, @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation | `String` | `null` | ### Read Only, Reflected Attributes. | Attribute | Description | Type | Default | | --------- | ----------- | ---- | ------- | | `loading` | Reflects the loading state of the image. True means the image is being loaded. | `Boolean` | `false` | | `drawing` | Reflects the drawing state of the animation. True means the the animation is in progress. | `Boolean` | `false` | | `complete` | Reflects if the drawing has completed | `Boolean` | `false` | Built with Polymer 2.0
View on GitHub
GitHub Homepage
Online Demo
Issue tracker
Documentation
License

scatter-image version 0.0.1
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.10
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.11
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.12
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.13
### Dependencies Polymer/polymer#^2.0.0 * resize-aware##1.9.1

scatter-image version 0.0.2
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.3
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.4
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.5
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.6
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.7
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.8
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.9
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.14
### Dependencies Polymer/polymer#^2.0.0 * https://github.com/gthmb/resize-aware.git#v2.0.alpha

scatter-image version 0.0.15
### Dependencies Polymer/polymer#^2.0.0

scatter-image version 0.0.16
### Dependencies Polymer/polymer#^2.0.0 * mlisook/resize-aware#^2.0.0

scatter-image version 0.0.17
### Dependencies Polymer/polymer#^2.0.0 * mlisook/resize-aware#^2.0.0

Online