1.0.4 • Published 6 years ago
vasilie-image-distortion v1.0.4
image-distortion
Install
Node environment (Webpack)
npm i vasilie-image-distortionUsage
Node environment (Webpack)
import ImageDistortion from "vasilie-image-distortion";
export default function(){
var distortion = new ImageDistortion({
displaceSpeed: [1.2, 3.1],
displaceScale:17,
canvasScale: 1.1,
displacementImage:"assets/img/tv-noise.jpg"
});
window.onload = function(){
distortion.init();
}
};You can also bind properties to the event like this
var scrollDisplacement = new ImageDistortion()
scrollDisplacement.init();
document.addEventListener("scroll", function(){
scrollDisplacement.displaceScale = window.pageYOffset * 0.04;
});Settings
| Option | Type | Default | Description | Properties |
|---|---|---|---|---|
| imageSelector | string | ".distort-image" | Image to distort | |
| displacementImage | string | "assets/img/noise.jpg" | Image for displacement | |
| wrapMode | string | "REPEAT" | Displacement Sprite wrap mode (Image size has to be power of 2 for REPEAT to work) | CLAMP, REPEAT, MIRRORED_REPEAT |
| displacementSpriteSize | array | img.width, img.width | Size of displacement sprite | |
| displaceSpeed | array | 1.0, 1.4 | Displacement image speed on x and y axis | |
| displacementRotation | double | 0 | Displacement image rotation | |
| canvasScale | int | 1 | Scale of the canvas, set number larger then 1 to preserve edges from distorting | |
| transparent | boolean | true | Canvas background transparency |