Unlike older stacks of this nature (like DanceSlider), you are presented with a modern editing interface in Stacks and RapidWeaver. From a select menu, you can choose the type of content you want displayed. Then fill-in the details, like the title, caption and links. MouseReveal quickly constructs your presentation window. Zero complicated code or configuration is required on your part, to achieve the basics.

Many options are provided to customise the presentation of your list. Almost every aspect of its style and colour can be changed. You have settings to change the layout between mobile (smaller screens) and desktop devices; thereby ensuring everything comfortably fits the screen space. Perfect for building PWAs (progressive web apps).

Reasons for using MouseReveal:
  • Clean, semantic markup. Good for SEO, even better for accessibility compliance (e.g. keyboard navigation).
  • Media instantly "snaps" into view. No sluggishness or juddering caused by fade effects and suchlike.
  • Content like video automatically stops playing when you navigate between items.
  • Images and video get preloaded, so you're typically not left waiting for things to load when navigating the items.
  • Fully responsive, using the power of CSS Flexbox. Everything scales and reflows beautifully to fit different screen sizes.
  • Really lightweight - the combined code base of the Javascript and CSS is less-than 30 KB. So this stack won't slow down your pages!

Example

This is a basic working example of MouseReveal, featuring images of different sizes, some caption content and video. It uses the 'arrows' list style. The same example content is available to test in the stack, by choosing the 'MouseReveal Demo Content' source.



On the surface, MouseReveal may look very modest in what it can do. However its wide choice of settings mean MouseReveal has lots of potential uses for displaying content.

Setup

Follow these instructions for setting up your first MouseReveal stack.
  1. Install MouseReveal in the normal way, by dragging and dropping its icon onto the RapidWeaver Dock icon and following the onscreen instructions.
  2. On a Stacks page type in RapidWeaver, open the Stacks Library and search for 'MouseReveal'.
  3. Drag and drop a copy of MouseReveal into your page.
  4. Press the blue button to add content sources to your MouseReveal. The 'MouseReveal Demo Content' is a good one to practice with.
  5. Remaining in edit mode, select the main MouseReveal stack to access its settings in the Stacks side panel. You'll find that there are a wide choice of settings available to adjust.
  6. Keep previewing your page in RapidWeaver to see your MouseReveal evolve, as you adjust its settings. You can test it using the 'simulation' previews in RapidWeaver.

All the settings in MouseReveal have informational tooltips, which display on mouseover. These can provide you with some help and guidance about what each setting does.

Supported content

MouseReveal supports the following content types or sources, which you add as sub-stacks in the editing interface.
  • Images (dragged and dropped or warehoused)
  • MP3 Audio
  • MP4 Video
  • Vimeo
  • YouTube
Simple content types are recommended. More complicated stacks (like sliders) are less likely to work, because these often don't like to start hidden.