Sticky Offset Panels

sticky offset panels
Sticky Stack

The widget uses the jQuery Sticky Stack plugin to create panels which scroll up and stick.
Each section consists of a full size background image and a panel which is centered vertically in the browser window. The panels are offset left and right in alternate sections and then center themselves when the page is viewed on an iPad or iPhone.

Panel Contents

panel options
Panel Options

The panel has an h1 heading, an optional figure element with image, alt text and caption, a text content block and an optional CTA style link tab which can be configured as an internal or external hyperlink.

Responsive

responsive panels
Panel width

The panels are responsive and have 60% width when viewed on computers.
On tablets, the panels become centered and on mobile phones they increase in width to 98%.

Text Content

The panels can show just the heading and text if required.
This section has a coloured background created with a 200px square image.
The shape was created in Keynote, a screenshot taken and the image cropped to suitable dimensions.
The image is then inserted in the same way as the full size background images.
The optional footer has auto update of the copyright year and a smooth scroll to the top chevron tab.

© EverWeb Widgets -