I want to learn about

3 great HTML5 effects to use in eLearning interactions

by Darren Rooney - May 14, 2015

This blog showcases Html5 effects that can bring interaction in digital content to life. Both html5 effects and JavaScript are key elements used by our design team to deliver our Content development services.

Why use HTML5 effects and JS?

HTML5 and JavaScript have some excellent features for adding animation and interactivity to your designs. The great thing about using these effects, rather than Flash, is that it is compatible with Apple devices like iPods, iPhones and iPads. Nowadays it is vital to use responsive design because users will view learning content on a wide range of devices. All of our interactions are fully responsive and will resize automatically depending on the user’s screen size and resolution.

Here are a few ways you can make your learning content more engaging using HTML5 and JavaScript. Try shrinking your window to test the responsiveness. (it even works in the middle of an animation!).

the science behind elearning design free ebook


Get a demo of our Compliance solutions or Medical communications services to see
how creative we can be with HTML5 and Javascript

1. Drag and drop html5 effect

This will add interactivity and draw the user into the information. You can also use drag and drop to create a gamification element to your eLearning.

Test out the demo - drag and drop

2. Animating text

It is now possible to add sophisticated animations to your text. This can keep your content looking fresh and draw the users eye to areas of text. With JavaScript you can even apply three dimensional effects to text and objects. You can see a few cool effects used on the text below.

3. Add hover effects

You can create some really interesting hover effects which can reveal information and give visual feedback as users hover over certain parts of your design. Using these effects can transform a flat design into something which is very interactive and visually appealing.

Hover over the squares below with your mouse cursor to see some examples

Design inspiration for Html5/JS effects

These three simple examples are just the tip of the iceberg when it comes to building interactive eLearning content with HTML5 and JavaScript. The capability is growing and becoming more powerful. I'll blog about more these effects and ideas in future blogs. For now, I'll leave you with some design insights and inspiration:

Information is beautiful

Science of design

the science behind elearning design free ebook

Learn more about HTML5 effects and Javascript

If you'd like to ask Darren any questions about eLearning design add a comment below.

Get a demo of our Content development services and Compliance solutions if you've a need for efficient, high quality digital content production.

Related posts

This month, two of our learning experience designers (LxDs), Niamh and Anna, chat about our new suite of compliance resources, Comply… Suffice to..

Talking LxDs
Read Article

Last year we endeavoured to have much more meaningful conversations with a number of our content development clients about the move away from SCORM..

Helen Cassidy
Read Article

Our Learning Experience Designers (aka the artist formerly known as 'Instructional Designers') have been instant messaging again. This time it’s..

Talking LxDs
Read Article

Most workplace learning happens on the job rather than through formal courses. Knowing this, our expert Learning Experience Designers tap into the..

Talking LxDs
Read Article