scatter-image
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
Links
Compatibility
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 effectGitHub 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