A Polymer 2.0 Custom Element providing a scattered image drawing effect
[ This description is mirrored from README.md at github.com/gthmb/scatter-image on 2019-05-22 ]
<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.
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
Install
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.0.17
Dependencies
Polymer/polymer#^2.0.0
- mlisook/resize-aware#^2.0.0