Elearning challenge #300
This example created with HTML and JavaScript uses a slider and animations to make a document more interactive.
The content for this learning interaction was inspire by ‘Mental Health’ month.
Using animate.css and Josh.js enabled css animations to be revealed as the user scrolled the page using the slider. This is essentially a one page document but it does not feel that way to the user as each pane is only revealed as they scroll. Text is revealed with a delay so that the user receives the information in bite-sized chunks.
This is a quick and simple example but I can see numerous applications for this approach in e-learning development especially when there is a need to break-down large documents into more manageable chunks.
Opening Screen of Interactive DocumentSource: Images for this example were sourced from Pixabay and Unsplash.
Skills
- Developed with HTML, CSS, Javascript.
- Web development and coding.