A few weeks back, after wrapping up my space-themed drawing, I thought about how cool it would be if I could somehow go the extra step and potentially make my new scene interactive.
After some digging, I realized the easiest way to go about this would be to make my drawing a parallax-like experience using Matthew Wagerfield's Parallax.js
My goal was to turn this...
...into this
Preparing the assets
Before I could dive into my code, I had to prepare my assets. I had to export each layer of my drawing as its own image, or PNG in this case. I ended up with a total of 9 PNGs.
My assets were also pretty large in terms of file size, so to solve that, I used TinyPNG to help reduce file size without compromising too much on the image quality.
Project Structure
After optimizing my assets, I moved them into their own folder for the sake of organization. I downloaded the minified version of Parallax.js I found in the GitHub repository and placed it in the root of my project directory like so
Development
With my files in place, I opened up index.html
and set up my images
<div id="scene">
<div><img src="images/background.png" /></div>
<div><img src="images/Nebula.png" /></div>
<div><img src="images/Pink Haze_.png" /></div>
<div><img src="images/Dark Haze.png" /></div>
<div><img src="images/Stars.png" /></div>
<div><img src="images/bottom.png" /></div>
<div><img src="images/top.png" /></div>
<div>
<img id="small-planets" src="images/Smallest Planets.png" />
</div>
<div>
<img id="main-planet" src="images/Main Planet.png" />
</div>
</div>
With the images in place, I needed to add the data-depth
attributes to their parent divs. The closer something was to the foreground, the higher its data-depth
value.
The movement applied to each layer will be multiplied by its depth attribute.
<div id="scene">
<div data-depth="0.00"><img src="images/background.png" /></div>
<div data-depth="0.00"><img src="images/Nebula.png" /></div>
<div data-depth="0.00"><img src="images/Pink Haze_.png" /></div>
<div data-depth="0.10"><img src="images/Dark Haze.png" /></div>
<div data-depth="0.40"><img src="images/Stars.png" /></div>
<div data-depth="0.60"><img src="images/bottom.png" /></div>
<div data-depth="0.70"><img src="images/top.png" /></div>
<div data-depth="1.00">
<img id="small-planets" src="images/Smallest Planets.png" />
</div>
<div data-depth="0.80">
<img id="main-planet" src="images/Main Planet.png" />
</div>
</div>
I then targeted the scene with javascript and created a new parallax instance with that scene as the parameter.
var scene = document.getElementById("scene");
var parallax = new Parallax(scene);
I now had a functioning parallax experience. However, it was too large, and things were a bit out of place
I resolved this by adding some CSS, though ideally, I should have resized my actual images.
.scene {
margin: auto;
padding: 0;
max-width: 700px;
max-height: 700px;
overflow: hidden;
}
[data-depth="0.80"] {
left: 25% !important;
top: 20% !important;
}
[data-depth="1.00"] {
left: 80% !important;
}
#main-planet {
width: 50%;
}
and with that, I had my end product. If you'd like to see it for yourself, head on over to my site on a desktop browser and hover over the canvas. Enjoy!
Top comments (1)
Looks sweet! You might even be able to get it working on mobile! From the docs: "Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead".