EverWeb Codebox logo

EverWeb Widgetbox 3

Image Stack Widget

Responsive Image Stack


The stack consists of panels which slide up and stack - one on top of the other - on page scroll.
Each panel consists of a heading, image and caption/description contained in an HTML5 section element.
The panels hit the top of the browser window with a bounce animation and have an optional "speed blur" box shadow when in motion.
Since it is responsive, the stack has a maximum width control to stop it expand too much at wide browser settings.
The demo has a maximum width of 1200px and is responsive down to 600px. This will allow it to respond to the screen width of tablet devices. It is not envisaged that the stack would be used on the smart phone version of the site!
Since it is created on a blank page, the stack has a built in header with an h1 heading and a back button link.
There is also a built in "Back To The Top" button which can be styled for color and opacity and has a scroll speed setting for adjusting the speed in relation to the number of panels.

Image Stack Widget
Image Stack Widget

Page Setup

The widget is set up in a similar manner to the Flex Responsive Website widgets so this is a useful introduction to learning the method of creating a fully responsive website design.
Create a completely blank page with the header and footer heights set to zero, a suitable browser background color and a content width equal to the narrowest screen the page will appear on.
If the stack is to be used on the full site and the tablet version, a content width of 600px is OK. If the stack is to respond to the narrower width of smart phone screens, this width should be reduced to 320px.

Widget Settings

Drag the widget onto the page a place it at the top so that its position Y is zero and check the "Full Width" control in the Metrics inspector.
The height doesn't matter since the panels won't stack on the EverWeb design canvas.
The page needs to be viewed in the browser for the stack to be seen in action.
Set the required header height, enter the heading and set the font family, size and color.
Adjust the vertical position of the heading using the value for padding.
Set the header background color and the back button color. It has a transparent background.
Adjust the button position using the values for top and left and enter the URL for the page that visitors are to be returned to.
Set the maximum width for the stack container.
Add the images and highlight each file name in turn to add alt text, heading and caption or description.
Set the container background color and padding.
Set the panel styles.
As the panel moves, a shadow appears to create a "speed blur" effect. Set its color and opacity. If it is not required, set the opacity to zero.
Set the panel font styles.
Set the "Go Top" button's icon and background colors and adjust the opacity. Set the scroll speed in seconds. The higher the number - the slower the speed.

This widget is included in the Sliders widget pack.