1.0.4 • Published 5 years ago

vasilie-image-distortion v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

image-distortion

Demo

Install

Node environment (Webpack)

npm i vasilie-image-distortion

Usage

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

OptionTypeDefaultDescriptionProperties
imageSelectorstring".distort-image"Image to distort
displacementImagestring"assets/img/noise.jpg"Image for displacement
wrapModestring"REPEAT"Displacement Sprite wrap mode (Image size has to be power of 2 for REPEAT to work)CLAMP, REPEAT, MIRRORED_REPEAT
displacementSpriteSizearrayimg.width, img.widthSize of displacement sprite
displaceSpeedarray1.0, 1.4Displacement image speed on x and y axis
displacementRotationdouble0Displacement image rotation
canvasScaleint1Scale of the canvas, set number larger then 1 to preserve edges from distorting
transparentbooleantrueCanvas background transparency
1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago