Bringing this 2-D Nebula Drawing to Life With Code

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!