Easy parallax is a small library for making illustations with a parallax effect, you can check a demo in my The legend of zelda parallax illustration
It uses p5.js funcitonality for loading images and rendering the canvas, it draws images layers and move them based on mouse position when on desktop and device rotation on mobile devices, checkout the index.html for a code example.
-
load p5.js library on your file. cdn: https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
-
load easy_parallax.js on your file
-
add a container for the canvas element that will be created for your illustration, for example:
<div id="parallax_container"></div>
-
then create a new EasyParallax object:
let parallaxIlustration = new EasyParallax("parallax_container", layers, 2912, 1429);
the EasyParallax function receives four parameters:
- the id of the container
- a layers object were you define all the image layers for your parallax illustration
- the width* of your viewport
- the height* of your viewport
*this should be the ideal width and height of your illustration, they are used to calculate the aspect ratio of your canvas and keep it while redimentioning it, the default size for the canvas is 100% width of the window's Width and automatic height.
the layers object you pass to the EasyParallax function should look like this:
let layers = {
"layer_1": {
src:"img/bg_bottom.png",
x: .5,
y: .5,
w: 1.3,
z: 1,
fromBottom: true
},
/* the rest of your layers... */
}
the layers object has properties that are your layer objects, you can name this layer properties anything you want, but they must have this attributtes:
- src : the image location
- x : the image x position relative to the left of the canvas, 0 is 0%, 1 is 100%
- y : the image location relative to the top of the canvas, 0 is 0%, 1 is 100%
- w : the width of image relative to the width of the canvas, 0 is 0%, 1 is 100%.
- z : the amount of movement it will have based on mouse/device rotation, 1 or greater is a lot of movement, 0 is no movement at all
- fromBottom: optional, if true the y position is calculated relative to the bottom of the canvas
the order your layers are drawn is from the firs property to the last one, so objects in the background should go first in the code, and objects on the foreground should be the las properties.
This is something i made for fun after watching something similar on twitter, i am thinking about keep to work on this Easy_parallax script to make it really straight forward to use and create more illustrations like this on the web.
things that i am thinking on doing:
- Improve device rotation information handeling, it is very limited right now.
- Making a UI tool for positioning images/layers that doesnt require writing code and is more frienlier to illustrators. (will probably be a paid thing)
- makin tests to be sure you can put many parallax illustrations on the same page.
- adding animation capabilities
- supporting "scrolling" inside the illustration.
- Adding support to read layer positions from a .psd file
That is for the time being, if you find this cool or do something with it please show it to me at twitter