Stacks 5
Vegas
Animated hero.
Add beautiful background animations behind any stacks content. Great for hero banners.
Overview
This stack in a nutshell.
Vegas add beautiful background animations behind any stacks content. That's demo one you saw above when you arrived.
Built with absolute simplicity of use firmly in mind. It could not be easier or faster to obtain this type of effect.
- Five carefully crafted background image presets built in for you to choose from. Speeds are controllable also.
- Set your own custom height, or choose from one of the built in presets, including full screen mode (as above).
- Full screen mode has a scroll to see more arrow, that can be hidden or shown, with or without animation.
- 14 different overlay presets to make your content stand out even more. Lights, Darks, and Grids.
- Extremely intuitively designed edit mode interface and concise easy settings.
- Vegas adapts to the height of the content you add at any screen size.
If you choose to make Vegas taller than your content, then Vegas will vertically align your content centre. Else Vegas will become at least the height of your content, plus any margins and padding you applied to the top and bottom of your content.
Demo
The stack in action.
Look Up
The demo is the full size banner at the top of this page.
Vegas can however be used as an animated background anywhere in the page.
Just think of Vegas as a 1 column stack that you may place anything inside.
Settings
User configurable options.
5 carefully crafted animation presets to choose from:
- Rock Solid Fade
- Classic Ken Burns
- Modern Ken Burns
- Blurry Vision
- Swirling Breakers
Simply select one of the built in preset speeds. This is then handled by the stack, depending on the animation you have chosen. Just choose a faster or slower speed if desired.
You can choose a custom height here to enter say 500px. Vegas will never be shorter than that.
Or you can choose one of the built in presets that relate to the screen:
- Custom Height
- Full Screen Height
- One Half Screen Height
- One Third Screen Height
- Proportional (aspect ratio based on width)
Only available when Full Screen Height is chosen in the Height setting.
This is the arrow that you see at the bottom of demo 1 on arrival. If you click it, it will scroll to the content of the page.
- Hide Arrow
- Display Static Arrow
- Display Animated Arrow
Here you have a selection of overlays that will appear in between the background image and any content you add inside of Vegas.
The are dark and light overlays available to make your content stand out even more.
This is the maximum width that the content you add inside of Vegas can ever appear. It is not a fixed width, so will still think accordingly on smaller screens.
When you are working with white or really light content, you will want to check this option to darken the edit mode user interface (So you can see what you are working on).
When selected, the stack will think down to a tidy 40px tall bar regardless of contents. This only affects edit mode, for those who like to stay organised, when you are done adding the content to Vegas.
You only see this option when in Fullscreen mode.
You only need adjust this if you are seeing an issue where Vegas scrolls to far, when the scroll down arrow is clicked.
This happens very rarely, and only in a couple of known themes.
If this happens to you, all you need to do is add the height of your navigation bar in pixels here. You may need to use some trial and error to get the correct value, by previewing the page.