Hi my name is Orlando, I am the creator of Easy Parallax.
A tool that allows you to create
interactive illustrations with this parallax effect
in HTML5 without writing code.
 
In this video I will show you how to use
the Beta version of the app. Let's start!
When starting the app, this is what you see.
the first step is to select the size
you want for your canvas.
by modifying this values up here.
In this case I want a dimensions of 700 by 500
 
now is time to add the first images,
with the "add image" Button in the left panel.
I pick the image I want to app
and there i have it on my scene
now we need to edit their properties.
the second bar up here is the properties bar.
each one of this properties: x, y, w and z
modify different apects of how our images look.
All of them receie a number between 0 and 1
where 0 equals the 0% of the canvas size
and 1 equals the 100% of the canvas size
 
so for example, if on the x i put a
0.5  and in y another
0.5, my image..
is place on the mid point of the canvas.
If we change X by a 0
my image is now from the very left of the canvas.
 
I really hope I explained my self well here.
so for my background what I want
is for it to be
on an x position of -0.2
and a y position of -0.2 as well
the W letter controls the image width
in this case I want it to be
a 20% wider than my canvas so that is a 1.2
in the case of the background
It should'nt move that much
So we will edit the Z property wich controls the amount of parallax movement
a 1 would make it move a lot,
and a 0 would not make it move at all
in my case a 0.02 should be fine.
pretty accurate, I am going to  increase
this Width to 1.4... 1.5 better
excelent
here we have a background
that has some parallax movement to it.
Time to add more images
Click again on the "add Image" button
And i selected a mountain.
when imported, images take the same default properties.
Let's edit them.
so i want this mountain to be at...
25% of the canvas width on the X position
a 60% on the Y position
 
a width of maybe 45% or better 56%
 
 
 
An for Z lets make it a .02
 
But now it moves to little
let's make it 0.1
and let's also change this 0.6
from Y, for a 0.8
so that it looks better
let's add more images
now, the meditator, we repeat the same steps.
we start by making it's width a 30% of the canvas
its position will be an x:0.56 And a
 
 
And 0.36 for Y
and for its Z movement, it will move more than the rest of the elements
so a 0.3 for Z
this is starting to look kind of cool now.
 
now let's add a final Image
but it appears to e overlapping our meditation man image
this can be fixed by
this arrows here to change the layers order
so with the up arrow
 
It is now behind our meditation man image
I can now adjust this position a litte
I want a 20% vertical distance
and we can also put
a Z movement of .56
so that it won't move that much.
and thats pretty much it.
you add images with the "add image" button
Modify their properties on the bar
Until they look the way you want them to
and once your illustration is ready
you should pick a name for your project, up here.
I picked "tutorial" in my case, and now
click the "export" button.
you can choose were to save your project
desktop will do for now.
click on select folder.
once this is done I can go to where
I decided to save my project
where i will found my project with the "tutorial" folder name
here you can see an index.html file
and an img folder with the images I added t my project.
these are your parallax illustration files
 
it is ready to use on the internet
but you are gonna need to serve them
if you are a web developer you probably now what to do.
if you are an illustrator maybe you will need to do a google search
or stick around for my next video
