Our latest widget: Scroll Reveal is simple, highly useful, and perhaps best of all – FREE. In this article, we're putting our new theme Infini Club under the microscope to examine how Scroll Reveal was integrated to create two very aesthetically pleasing, yet “real world” functionalities.

Scroll Reveal has limitless applications,and in this theme it serves as a sort of backbone to the site’s entire navigation. This feature only takes a few extra moments to set up on top of any standard navigation, yet adds a whole new level of sophistication to any site.

Breaking Down the Header Bar

Let’s take a look at the live demo and click over to 'The Club' page so that we have some landscape to scroll. Starting at the top of the page, we have the Infini Club logo pinned to the top-left. We also have the word ‘Menu’ and the hamburger icon pinned to the top-right. Additionally, we have an accordion menu already functioning with a click, before any scrolling takes place.

Now if we scroll down the page a bit, here’s where our Scroll Reveal comes into play. We see a full-width black header bar drop down from the top of the page, acting as a background to the logo, menu, and accordion that are already there. So in essence, our Scroll Reveal is only applied to one single rectangle element.

If we switch over to Muse, we’ll need to dive into our Master page. Taking a look at the top-left, we see two occurrences of our Scroll Reveal widget, the first using the graphic style of ‘Nav’ and the second the graphic style of 'Top.'

If we open our graphic styles menu and move our mouse to the header bar on the page, we can click to select the accordion menu layered on top. Glancing at the graphic styles, nothing is applied here. As we discovered in our live demo, the element attached to the widget is the black header bar, which should always be layered behind the accordion so that the accordion remains clickable.

So what we can do is click and hold on our accordion menu, and drag it down out of the way just a bit, allowing us to select our black bar sitting behind. When we do, our graphic styles panel will display the first style of ‘Nav’ is applied.

Feel free to change this if you wish, otherwise you can move your accordion back up to it’s top-of-page placement.

This theme conveniently uses the same nav elements across all breakpoints. With the exception of the slight logo adjustment on the lowest breakpoint, everything else remains the same: our menu icon, our full-width black header bar, and full-width accordion menu. What this means is that if you make changes to the graphic style applied, you only have to do this on one breakpoint. All others will be affected by this change automatically.

Now let’s expand our settings panel for the Scroll Reveal widget component using the ‘Nav’ graphic style. Scroll Reveal Mode is set to ‘Show When Scrolling Down’ so as to act as a background to the nav as the user explores the site. Scroll Offset is set to zero, so that the effect begins immediately upon scrolling. And Transition Type is set to ‘Slide From Top’ but 'Fade' is a solid alternative.

Back-To-Top Navigation

Remaining on our Master page, let’s expand the settings panel to the second Scroll Reveal widget component, utilizing the graphic style of ‘Top.’

We see a very similar setup, with the only notable difference being that the Transition Type option is set to 'Slide From Bottom,' which is allowing our arrow graphic to slide up into view in its lower-right pinned location.

However, our arrow graphic isn’t located on this page. How come? Well, we don’t need the graphic on every page since our Home Page fills the entire browser and doesn’t allow for any scrolling. So you’ll find the arrow graphic placed on each individual top-level page in the bottom-right corner.

Let’s jump back into ‘The Club' page. Scrolling to the bottom of the page, you’ll see the arrow graphic placed in the bottom-right corner. Selecting it, we can see the graphic style of ‘Top’ is applied. Additionally, there is a bottom-right corner pinning applied, which is important to maintain when setting this up on any new pages. This is what forces the arrow to remain in place as the user continues to scroll. And since we have the Scroll Reveal implemented from the Master page, we don’t need to add a widget to accompany the arrow graphic on each individual page.

Scroll Reveal is our newest utility widget, and the possibilities are endless. We encourage you to explore and experiment with its many different applications! For any questions, concerns, or new ideas, always feel free to reach out to us at support@musethemes.com.