Blog Post

E-Learning Challenges
3 MIN READ

Using Cinemagraphs and Video Backgrounds in E-Learning #428

DavidAnderson's avatar
3 years ago

Cinemagraph & Looping Videos in E-Learning #428: Challenge | Recap

Using subtle, looping motion in your course can effectively add an extra layer of visual interest to the typical slide background. The key is finding the right balance in motion, pacing, and composition. And that's what this week's e-learning challenge is all about.

Challenge of the Week

This week, your challenge is to show how cinemagraphs or looping background videos can be used in e-learning. To help you get started, check out some ways motion backgrounds can be used in e-learning.

Cinemagraphs

Cinemagraphs are a creative way to animate isolated parts of an image. Unlike videos, cinemagraphs are more like static photos that include a small area of the looping animation. This approach works well for e-learning because it reduces the amount of on-slide animation that helps create depth and richness.

Amazing Cinemagraphs from Around the Web

Video Backgrounds in E-Learning

Slide backgrounds are one of the easiest ways to create a sense of place and location in your course designs. Because backgrounds are the most significant on-slide element, they help set the context for your learning content more than any other object. 

So how can you improve on the perfect background? Try using full-screen videos as slide backgrounds.

Companies like Wistia creatively use video backgrounds to engage their visitors the moment the page loads.

View Wistia’s video backgrounds

Natural environments, like offices, factories, classrooms, and other workspaces, help create a sense of authenticity. Like still photographs, videos can also add a sense of location and context to your slides.

View an example of a video background in e-learning

Resources

Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

Last Week’s Challenge:

Before you get started on this week’s challenge, check out the practical ways plain language can make complex information easier to read:

Plain Language Examples RECAP #427: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

Published 3 years ago
Version 1.0

101 Comments

    • AshiTandon's avatar
      AshiTandon
      Community Member
      Pure awesomeness as usual :) loved the skyline cinemagraph.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Thank you all for the kind re-welcome. I'm very rusty after 12 weeks. I couldn't remember how to set up my player. :) I can do about an hour a day on the computer so we'll see how things go.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Legend
      Good to see you back Jodi, with another polished demo. I'd never have thought of using video to create a fish tank in that way.
    • SarahCooper-b98's avatar
      SarahCooper-b98
      Community Member
      That was amazing. I really need to learn how to do it.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      I wish this was my demo...I like following the path and how you layered in the different videos for each item.
    • ShannonPage-27d's avatar
      ShannonPage-27d
      Community Member
      This is probably not the question you get most out of this awesome presentation, but can you tell me how you did your true/false sliders? Is it a button with states? Sorry if this is a super basic question, lol
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Legend
        Hey Shannon, yes they're homemade toggle buttons created using state changes.

        It's the same principle I used in last week's challenge. You can see how it works from the master file, here: https://bit.ly/ELHC427dl
    • ChristopherC648's avatar
      ChristopherC648
      Community Member
      This was super cool, but I started feeling motion sickness. LOL!
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Legend
        Sorry Chris - but you raise a good point. As I have created the motion using motion paths, it would be possible to offer a steadier viewpoint for those who struggle with repeated animations. For accessibility purposes, being able to control the speed of video backgrounds and cinemagraphs might be a consideration.
    • SarahCooper-b98's avatar
      SarahCooper-b98
      Community Member
      I died. :(

      Loved the breathing effect and the color darkening as I waited on the emergency crew.