EverWeb Widgets

Scrolling Widgets

The scrolling widgets allow EverWeb users to create scrolling content with full size or parallax scrolling backgrounds with different types of content.
NOTE: These widgets should only be used by more advanced EverWeb users who have previous experience of creating content pages for displaying in iframes and know how to work with responsive widgets.
Click any widget icon to see the demo …

Header & Navigation

The widget creates a responsive header with built in navigation suitable for use with full page scrolling widgets. The header has adjustable opacity and can be fixed in position to make it sticky by checking a box.
The navigation is inline when viewed on computers and switches to a drop down menu on touch devices. The drop down is opened by tapping a "hamburger" style icon.

Scrolling Panels

Each section consists of a full page background image with a content panel. On scroll, the background image stays static while the content panel and the next section scroll up.
Each panel can contain a heading, an image with alt text and caption and a text description. The panels can have background transparency and a border and/or a box shadow.

Scrolling Offset Panels

This is similar to the Scrolling Panels except the panels are offset left and right alternately to give a more varied appearance to the layout.
Both scrolling panel widgets have an optional sticky footer which has auto update of the copyright year, a smooth scroll back to the top chevron and variable background opacity.

Parallax

Parallax scrolling is used to create 3D effect by moving the full size background images at a slower speed than the foreground content while scrolling.
This version of the widget has a responsive content section which can contain a heading, image, alt text, text description and a CTA style link tab.

Parallax 2

The parallax scrolling , full width background images have an overlay caption and a CTA style link tab. These are centered both horizontally and vertically.
The content panels consist of a heading and a text description. Theset panels are responsive with a maximum width setting.

Parallax 3

In this version of the Parallax widget, the content sections have an image which is floated left, a heading, a text block which slide up to the right and an optional CTA style hyperlink tab.
Like all the Parallax widgets, it has an optional footer with auto update of the copyright year, background transparency and a smooth scroll, back to the top chevron tab.

Parallax iFrames

This is a widget which advanced EverWeb users can create content pages and display them in content sections in an iframe. The background images have an overlay caption and link.
The iframe content will scroll on both computers and touch devices when the content height is greater than the frame height. The widget has an option to prevent "white flash" when the iframe loads.

Sticky Stack

A sticky stack is a panel which fills the browser or device window and stays fixed in position allowing the next panel to slide up over it on scroll.
Subsequent panels slide up and stick to the top so that all the panels end up stacked on top of each other. They will then unstack themselves when the page is scrolled up.

Sticky Offset Panels

Each panel of the sticky stack widgets consists of a full size background image and a panel overlay which is centered both horizontally and vertically..
The panels consist of a heading, image with alt text and caption, text description and a CTA link tab. The offset panel version has alternate offset panels rather than horizontally centered ones.

Sticky iFrames

The content of the sticky stack panels is created on other pages in the EverWeb project and displayed using iframe. These frames are set so that they allow any overflow to be hidden and the content to scroll both on computers and touch devices like the iPad and iPhone.
The widget has an option to prevent "white flash" when the iframe loads.

© EverWeb Widgets -