Parallax in Canvas

Thoughts on the new Canvas pretty HTML editor

Parallax scrolling is a trend on websites where the background and foreground move at a different speeds when scrolling. This gives the perception of depth and dimension, and with just a little code and some patience you can apply this awesome interaction in Canvas for an amazing effect that creates a unique experience for your students.

True parallax has been used in video games since the early 1990’s in Super Mario World, Sonic the Hedgehog, and Donkey Kong Country. In those games, the background moved at a different pace than the characters in the foreground. In web design, parallax effects became popular around 2011.

The method I am introducing for Canvas is a sort of faux-parallax because the background doesn’t actually move at all - only the non-stationary elements on the page move, such as text, the course navigation, etc. To get started, you will need to add some lines of CSS code to your Canvas theme editor:

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }

You can name the class whatever you want. In the Canvas course, you will need to refer to that class in the HTML editor. Your code will look something like:

<div class="parallax" style="background-image: url('URL'); height: 800px; width: 100%;">&nbsp;</div>

In this <div>, I am referring to the class in the theme editor, and then I need to indicate what picture I want to use. You can either upload an image into your Canvas course or you can embed an image from the web. Put the correct URL in between the (‘ and the ‘). Here is an example of what that might look like:

style="background-image: url('https://images.unsplash.com/photo-1488223060687-648b43f5efc0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1937&q=80'); 

I got that URL when I clicked upload image in Canvas and chose one of the Unsplash stock images. I copied the URL of the picture into my code. The other properties are important. You need to specify a height in pixels, and set the width to 100% for this effect to work. You can determine the height that you want. Also important is that between the <div> and </div>, you much have the characters: &nbsp;

Those characters are HTML code for a non-breaking space, or just a regular space like what you would see between two words. Without that code, Canvas will delete the <div> when you save the page and then return to edit. The space ensures that the <div> (and hence, the picture) will stay on the page.

That is essentially how to get started with your parallax images in Canvas. Watch the tutorial for a few design ideas, including interactions between images and text or sections headers, as well as a creative approach for using the parallax effect to create interactive gradient section dividers.

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow along on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

---