Since we are creating a website using impress.js, users have the ability to use keyboard navigations to traverse through various pages. But the users don't know that this website is built upon impress.js. This means we have to provide a hint indicating to users to use keyboard controls. A hint is created as a separate component from the presentation as shown in the following code:
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>This container should be placed after the wrapper container. Now, we don't need to show the hint in every step, so we are going to limit the hint to the home page. Initially the hint will be kept hidden with opacity of 0. When the impress presentation is initialized, we set display to block using the following CSS code:
.impress-enabled .hint {
display: block;
}Since opacity is set to 0, it is not displayed yet to the user. So, let's enable the hint on the home page using the following...