Advertisement
  1. Web Design
  2. HTML
Webdesign

How to Code a Scrolling “Alien Lander” Website

by
Difficulty:IntermediateLength:LongLanguages:

In this tutorial, the second in a two part series, we’ll be taking the awesome vector-based illustration produced in  “How to Create a Long Scrolling Background for a Website” and coding it up into a live site.

What We’ll be Building

We’ll be putting things together so that as you scroll down from the top of the page you’ll see an “Alien Lander” making its way to touch down. At the beginning we will see a UFO hovering in space.

As we scroll down the UFO will reach the atmosphere and become an “alien comet”. 

And then finally, when it passes through the tree line, it will turn into a “little green man” who makes his landing on the ground.

Take a look at the live demo!

SVG Images

In this project we’ll be using SVG images so we can take advantage of their ability to fluidly rescale, and their small file size.

Before we begin coding you are going to need the image created in part one of this tutorial series, separated into four SVG files:

  1. The UFO as a file named “ufo.svg”
  2. The “alien comet” as a file named “alien_comet.svg”
  3. The “little green man” as a file named “alien_landing.svg”
  4. The background image with the above three items removed, as a file named “background.svg”

You can export these SVG images yourself from your preferred graphics app if you would like, or alternatively you will find all four images ready for use in the source files on GitHub.

Setup Basic Structure

Create a new folder for your project and inside it create a subfolder named “css” and another named “images”.

Copy and paste your four SVG images into the new “images” folder.

In the “css” folder create a file named “style.css”.

In the main folder create a new file named “index.html”.

Your folder structure should now look like this:

In the “index.html” file add the following basic HTML to get the essentials in and load the stylesheet:

Add the Background

It might seem counter-intuitive, but we’re actually going to add our background image using an img element rather than as a CSS background image. We’re doing this because:

  1. We want to take advantage of SVG’s ability to resize, filling the entire viewport with our “background.svg” image no matter what the dimensions of the browser window are.
  2. In order for the scrolling technique to work, we need to know the height of the background image.
  3. Because we’re allowing our background image to be fluidly sized we have no way to know what its height will be in advance.
  4. As we can’t know the height of the background image in advance, we’ll have to detect it after the image after it has loaded.
  5. If we set “background.svg” as a CSS background image its height would not effect the site layout, making its height difficult to detect.
  6. By inserting “background.svg” as a regular image instead its height will effect the site layout, making its height relatively easy to detect using jQuery.

Now that you understand why we’re taking this approach, let’s start coding!

In your “index.html” file add this code:

If you preview your file in a browser now you should see the image filling the viewport. However, there will be still some white space around the edges. 

This is because browsers include a small margin on the body element by default. To override this, in the “style.css” file add this CSS:

There is also another browser default we’ll need to override, that of the display property on images being set to inline. If you scroll to the bottom of your page you’ll see there is currently a small white space underneath the image due to this default. Change it by adding:

You should now see the “background.svg” image fill up the window flush with the edges, and if you resize the window’s width you’ll see the SVG image rescale itself to suit the new size. The height of the site layout will also change to maintain the correct aspect ratio for the “background.svg” image.

Add a Foreground Container

In order to make the image we just placed behave as a background image, we need a way to make the rest of our content sit over the top of it in the foreground. We can achieve this by adding a div element that will act as a container, then modifying its position and z-index properties.

In your “index.html” file, after the image you just added, insert this new div:

And in “style.css” add this CSS:

Let’s run through what we’re doing with the code above.

First, by setting position to absolute we take the element out of the regular document flow, (which would otherwise place it below the background image), allowing us to place it anywhere we choose.

Then, we set the top and left properties to 0 which shifts the element up to the top of the window and horizontally aligns it with our background image.

After that we give the element a height and width of 100%. This makes sure the element doesn’t collapse down to nothing, hiding any content within it.

Finally, we set the z-index to 1 which brings the element forward so it sits in front of our background image (which is on a default z-index of auto). This prevents content inside the element from being obscured by the background image.

Our foreground container is now ready to have content added into it.

Add the UFO Panel

The way we’re going to make our UFO “land” on the ground at the bottom is by creating three panels, one for each “landing” stage. We’ll then add the corresponding SVG image for each panel, such as the “ufo.svg” file for example, as a fixed position background image. The image will then remain in place during scrolling while the background moves behind it, creating the illusion of descent.

Inside your “foreground” div, add this new div:

Now add the following code to your CSS:

In the first line of our above code we’re giving the element a height of 100% to make sure its content will be visible. Then, we’re adding our “ufo.svg” image as the background. We’re setting background-repeat to no-repeat as we only want one UFO to appear, and we’re then making background-position place the image in the center both horizontally and vertically.

With our background-size property, we’re setting the width as a percentage based value and allowing the height to be automatically calculated. This width is drawn from the original vector image in which the width of the UFO is approximately 40% the width of the overall illustration.

By setting the width of our “ufo.svg” image as a percentage, when the window is resized and the “background.svg” image changes with it, the UFO image will also adjust its width to retain the intended proportions.

On the final line we set background-attachment to fixed, meaning that the image will stay fixed in place as we scroll, giving us our illusion of descent.

Try refreshing your page and scrolling now–you should see the UFO moving vertically in amongst the planets.

Add the Comet and Landing Panels

As you scroll down on your site, once you go down far enough you’ll notice the UFO disappears. This happens because we’re scrolling past the height of the ufo_section panel so at that point we can no longer see its background. 

We’re going to stack three panels like this on top of each other, so that when we scroll past one and its background disappears the following panel’s background appears, creating the effect of one image being replaced by the next.

So we’ll now repeat the process we used above to insert the “alien_comet.svg” and “alien_landing.svg” images.

To your HTML, add the following just after your ufo_section div and still inside your foreground div:

Then to your CSS add these new classes:

We’re using all the same code and techniques here, with only the image file names changed and the width on the background-size property set to 15% to suit the narrower images we just added.

Your Completed CSS

Your “style.css” file is now finished and should contain the following code:

Go back to your site now, scroll down and you should see the UFO turn into the comet, then a little further down turn into the “little green man”.

Add Panel Height Calculations

Right now you’ll notice we have a couple of problems to solve when scrolling, and they are:

  1. The three panels are each not high enough. This makes it seem like the alien lander changes from one form into the other too soon so it never makes it to the ground.
  2. You can see the “alien_comet.svg” image start to emerge before the “ufo.svg” image has fully disappeared, which looks odd.

Because our “background.svg” image doesn’t have a fixed size we won’t know the exact pixel height each panel should be before loading. However, what we can decide on up front is the height each panel should be as a percentage of the height of “background.svg”.

Using jQuery we can implement this process:

  1. Define the height we want each panel to be as a percentage, (or fraction), of the “background.svg” image’s height.
  2. Detect the height of “background.svg” after it loads.
  3. Calculate and set the heights of the panels based on the above two pieces of information.

While we’re at it, we’ll also add in a couple of extra empty divs to act as spacers in between each panel and set their height using jQuery as well. Adding space in between the panels will make for a smoother transition, solving the problem of seeing the “alien_comet.svg”  image before the “ufo.svg” image is gone.

Update your HTML so there is a spacer div in between each existing div like so:

And in the head section, load in jQuery by adding the following:

Setup the JavaScript Function

Before the closing </body> tag, create a pair of <script></script> tags and setup a new function inside like so:

We want this function to fire when the page first loads, and any time it is resized, so to achieve this also add the following code after your opening script tag:

Get the Height of the Background Image

Inside the set_section_heights() function, the first thing we need to do is find out what height our background image currently is and save it as a variable. To do so add this code:

With the first part of the code, $(".background"), jQuery finds the element with the class name background. The appended .height() function then gets that element’s pixel height as an integer. This tells us how high our “background.svg” image is and saves that number in the variable doc_height.

Define Intended Section Heights

Now we’re going to setup an object in which we can define:

  1. The class name of each element for which we want to set a height.
  2. How high that element should be as a fraction of the background’s height. 

We’re going to iterate through this object and use the values it contains to resize the sections in our foreground.

Let’s start with just one entry in the object:

Here we’ve set the index, (the value on the left), to ufo_section to match the class name of our first section.

Then we’ve set the value to 0.25 which is another way of expressing 25%. In a moment, we’re going to multiply this value by the number stored in the doc_height variable, i.e. the height of the background image. By doing this we’ll be saying we want the ufo_section panel to be 25% of the current height of “background.svg”.

For example, if the height of “background.svg” was 1000px the height of the ufo_section would come out as 250px:

 1000 * 0.25 = 250

Now that we’ve gone through how this object will work, let’s add in some entries for the other elements we want to set heights on. Update your object to the following:

Note: I selected these values based on trial and error so feel free to play around with the numbers after completing this tutorial to see the effects.

Iterate the section_heights Object

With our object complete we’re ready to start iterating through it and resizing our panels.

First we’ll need an $.each() function to iterate the section_heights object and extract the index and value, (representing the class name and height respectively), from each entry it contains.

Add this code after your section_heights object:

To allow you to see how the above iteration function outputs the index and value variables, we’re using console.log() to write a little message to the console for each entry in the section_heights object.

Reload your site, open Chrome Web Developer Tools (or its equivalent in your preferred browser), and look at the console. You should see this:

On the left of each message after Index: you can see the index for each entry, i.e. the class names of the elements we want to resize.

On the right of each message after Value: you can see the value for each entry, i.e. the fraction of the overall height each panel should be.

Calculate and Set Section Heights

Now instead of just logging this data to the console, let’s use it to set the sizes of our foreground sections. Delete the console.log() line and replace it with this:

Let’s break down what this line does.

First we have $( "." + index ). We use this to find the element we want to resize. For example, with the first entry in our object the index is set to ufo_section. In this case the first part of our code will evaluate to become $.( ".ufo_section" ). With this code, jQuery is prompted to search the page for the element with the class ufo_section.

Next we add .height(...). With this code, jQuery will set the height of the element it has found, changing it to the value passed in between the brackets.

In between the brackets you will see value * doc_height. This is where we are doing the multiplication we mentioned before to calculate the intended panel height. For example, the first entry of our object has the value 0.25. This number will be multiplied by the the number saved in the doc_height variable.

Around the multiplication of those two variables you will see Math.floor(). This rounds the result of our multiplication down to the nearest whole number. 

So putting it all together, if the value of doc_height is 5197, the first entry in our object would multiply that by 0.25 giving us a result of 1299.25

Math.floor() will round that amount down to 1299. This means our code would now evaluate to become: $.( ".ufo_section" ).height(1299);

With this line, jQuery will find the element with the class ufo_section and set its height to 1299px.

Your Completed HTML & JavaScript

That wraps up your HTML and JavaScript. Your completed “index.html” file should now contain this code:

Reload your site now to see the code in action, and when you inspect your HTML you should see the newly calculated sizes appear inline:

Resize your browser window and you should see these values recalculate and update, e.g:

And You’re Done!

Take a look at the end result! Now when you start at the very top of the page and start scrolling you’ll see the UFO begin to descend. When it reaches the atmosphere it disappears for a little bit and an “alien comet” takes its place and continues the descent. At the top of the trees it disappears once more and a “little green man” completes the journey to the ground.

As I mentioned earlier, it’s a great idea to have a play around with the values set in the section_heights object so you can see how they effect the flow of the lander through its various stages.

I hope you enjoyed this tutorial and got some new ideas for cool things you can do with SVG images and fixed backgrounds.

Thanks again to  for the original vector illustration, thanks to you for reading, and I’ll see you again soon!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.