Tel: 012-345-6789

Scroll Over/Parallax Scroll Header & Image

The header consists of a background image and a transparent overlay panel which can animate in.
The widget uses a jQuery plugin to allow the effect to work on mobile devices too and also give the option for a parallax scrolling effect.
Background Images
Three different images are required for each device type, computer - tablet and mobile phone. The image files should be reduced in size before importing into EverWeb. The images used in this demo is 1600px, 1200px and 800px respectively.
NOTE: The width and height of the large image file must be known and entered into the widget settings for the scrolling effect to function correctly.
Overlay
The overlay can be adjusted for color and opacity and has an optional logo, an h1 heading, an optional h2 heading and an optional CTA style hyperlink which is configured to open internal pages only.
Viewport Height
The background image can be set to any height or to fill the browser or device viewport by checking a box. A different height can be set for mobile phones.
Info Bar
The optional overlay info bar sits at the bottom of the image and has options for a phone number, scroll down chevron and an email tab. The phone number is displayed on
Animation
The animation is turned on by checking a box once all the other adjustments have been made. The overlay and info bar have a fade in animation and the headings and link can either fade in or animate in from the top, right, bottom or left.
The animation time and delay can be set for each irem.
Scrolling Effects
In default mode, the scroll over effect only works on computers. Turning on the scroll effect allows the image to be fixed and the content below to scroll over it on computers and mobile devices.
Adding the parallax effect to this allows a preset parallax scrolling animation.

Responsive Navigation - Overlay Option

The navigation is inline when viewed on computers. On tablets and smart phones it switches to a full width block layout.
It can have up to fourteen links. The last two links can be configured to open external pages with a new window option.
Navigation Position
When it is inserted on the EverWeb design canvas, the navigation has a relative position. This means that it can be placed either before or after a header widget to appear above or below it.
To overlay the navigation on a header, the navigation should be inserted below the header widget.
To move it to the top so that it overlays the header, there is a checkbox to "Position nav at top".
When the page is published, the navigation will have switched to its proper place at the top of the browser/device window when viewed on computers.

© EverWeb Widgets -