Text overlay and parallax

Written By Sean Nufer
 
 

It’s time to level up!!

In the past several weeks, we have discussed how to create a parallax effect using images in Canvas, as well as how to place text on top of an image using CSS to create a text overlay effect. These are two very interesting effects that can add not only emphasis, but a lot of visual appeal to your courses. Today we are going to learn how to combine these two effects and create a text overlay parallax effect. This is a true wow-factor for your Canvas content.

Let’s play with that code!

In order to create the text overlay parallax effect, we’ll need to upload some custom CSS code into the institution’s Canvas Theme Editor. This is a process that a Canvas administrator can do. Here is the CSS code that we will be working with:

 
/*
* ==========================================
* PARALLAX
* ==========================================
*/

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

/*
* ==========================================
* TEXT OVERLAY
* ==========================================
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
    text-align: center;
    position: relative;
}

/* Use this div to lighten an image and put dark text overlayed */
.overlay-lighten {
    opacity: 0.3;
  }
  
/* Use this div to darken an image and put light text overlayed */
    .overlay-darken {
    filter: brightness(50%);
  }

/* Use this class in a div, h2, or p to center the overlayed text */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Note that CSS comments are indicated as such:

/ * This is a comment, everything between the two asterisks () are merely notes and note code */

The two classes, .overlay-lighten and .overlay-darken have values that can be edited. Or you can create multiple classes if you would like, such as:

.overlay-lighten-1 {

opacity: 0.3;

}

.overlay-lighten-2 {

opacity: 0.5;

}

.overlay-lighten-3 {

opacity: 0.7;

}

Likewise, you can create multiple .overlay-darken classes with values of

filter: brightness(25%);

filter: brightness(50%);

filter: brightness(75%);


Once you have your code uploaded to your Canvas instance, the next step is to create your content on the Canvas page. This part is fairly simple, and you can start by copying my code and pasting it onto your Canvas page:

<div class="overlay-content">
    <div class="parallax overlay-lighten" style="background-image: url('https://images.unsplash.com/photo-1619537905033-fb5406e5a1aa?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80'); height: 400px; width: 100%;">&nbsp;</div>
    <div class="overlay-text" style="width: 75%; min-width: 350px;">
        <h2 style="padding: 0 20px;">
            <span style="font-size: 60pt; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #142337;">You are all amazing!</span>
        </h2>
    </div>
</div>

  1. You’ll start a <div> with the class="overlay-content". Both the parallax image and the overlay text will be within this <div>

  2. The next <div> is your image with class="parallax". You can also add the overlay-lighten or overlay-darken class if you would like. You’ll set your picture using inline CSS: style="background-image: url('YOUR IMAGE URL HERE'). I would definitely set the width to be 100%, and you can determine the height that you would like, set in pixels (e.g. width="300px").

  3. The next <div> will be where your text sits and should have the class="overlay-text". I suggest setting a width and a min-width. For me, the min-width of 350px is ideal, and you can figure out the width that you would like, perhaps 50% or 75%. Play around with 100% if you’d like, but I would recommend some left and right padding if you do that, and don’t put to much text.

You can customize your font size, family, color, and properties (e.g. bold) either in the RCE or in the HTML editor. And with that you should be able to start creating your own parallax effects with text overlay.

These kinds of interactions may not contribute directly to students’ mastery of content or greatly impact curriculum alignment and assessment, but they truly add flair and impact to your presentation. In an era where it seems like a lot of course content is created by robots, there is value in seeking out ways to add personalization and humanization to our content. It shows our students that we care about them, the course, the content, and that we take pride in our craft.

 

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 us on social media

Twitter: https://twitter.com/HowToCanvas

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

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

Sean Nufer
Previous

Create Interactive Cards
Next

Text overlay