Big Scroll Hero Page Slider
Creating a full-width full-page hero slider with the Big Scroll display widget has some further some special considerations. If you have not already done so, have a look at the general Hero Sliders page before reading further here.
Omni Gallery Settings
Our example above uses the same settings as we did for the Hero Slider example, except the display widget is configured as Big Scroll. To make the most of the fixed background scroll effect, the minimum image height is set to 100vh to fill the height of the viewport.
For convenience we use the same additional CSS and attribute content as we did with the previous Hero Slider example, with the top margin for the hero content now 25%. In practice, if you use Big Scroll for a hero page you will likely want to create more comprehensive content for each slide and position it according to your own well considered design using attributes of the image files.
Navigation
In-page Navigation
For in-page navigation, the Big Scroll image display widget has options to place a menu of image titles on the left or right, or just bullets. Arrows at the top and bottom of the slides are also optional.
Header Navigation
A full page hero slider is often used as the design background for a single-page site or as a heroic home page to introduce a more detailed site and we wouldn't want the header navigation to spoil the overall effect. Here we have used a Header Extra Content attribute to add the styles below.
These styles are specific to the navigation header for Atomik and will be different for other themes such as Elemental or Modena. We make the header position absolute and increase the z-index so that it overlays the first slide. Then we give it a lightly opaque background, but that is just a design preference. Then in edit mode, we have to undo some of that so it doesn't interfere with editing the page.
On a real project, we would probably build the extra styling for the navigation into the theme and use a custom page template.
<style>
/* This style needs is added to a header extra content attribute - it
is not not effective within Omni because Omni wraps CSS in block
specific scope! */
div.ccm-page.theme-atomik .ccm-block-top-navigation-bar{
position: absolute;
top: 0;
z-index: 2;
width: 100%;
background-color: rgba(255,255,255,0.1);
border-bottom-color: rgba(255,255,255,0.2);
}
.ccm-edit-mode div.ccm-page.theme-atomik .ccm-block-top-navigation-bar{
position: relative;
}
</style>
Taking it further
When using Big Scroll as the introduction to a multi-page site, Omni Gallery could be configured to pull each image from a page list and use a page attribute for the corresponding caption overlay. You could even use Universal Content Puller through a Universal Content Puller Attribute to pull some content from each of the pages into the respective overlay for each page!
Big Scroll does not have to show images full page. The height and aspect ratio of images can be constrained with the usual options, so smaller scrollers can be configured as shown by Simple Examples of Display Widgets.
