EverWeb Widgets

EverWeb PhotoKit [3] Parallax Scrolling Widgets

Parallax scrolling images, MP4 video, Vimeo/YouTube, slideshow and text/image widgets to bring a web page to life. The pack contains a new style progressive nav, slide up on click footer and some animations.
Click any widget icon to see the demo …

View CartAdd To Cart

Parallax Info

Click the icon to the left to find out about the parallax images and learn about the importance of properly preparing images for the web.
Find out how to quickly batch resize images and to generate thumbnail images from their full size version using Preview.app

Header

The header has a full width, fixed height background image which can go to full height on mobile phones in portrait mode if required.
The grid overlay has a grid layout with a maximum width setting and the navigation is positioned to the right when viewed on browser/screen widths above the break point.

Image

The images are load as background images and are inserted in three sizes - large, medium and small. The overlay has a heading, text and an optional link. These items have a control for spacing them out vertically.
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position. At the maximum setting the image will scroll with the rest of the page content.

Split Text/Image

The container has a grid layout with 2 columns. The image is inserted as the background of a <figure> element and has parallax scrolling applied to it. The text is inserted in an <article> element which has an optional link.
At screen widths below the break point the text is given a transparent background and moves on top of the image. It can then be vertically aligned at the top, center or bottom.

Text Over Image

The parallax text/image widget has an overlay with a grid layout and two columns. The text can be placed in the left or right column when viewed on browser/device screen widths above the break point .Below the break point the list is centered.
There are instructions for creating a split background image to give a solid background to the text.

Logo Navigation

The navigation is full width responsive with the links centered. If the optional log is unserted, the links align right. On mobile touch devices the navigation is replaced with a "hamburger" icon that opens a drop down navigation on click.
The current page can be indicated using a contrasting color and an optional animated underline. The navigation can overlay a hero item if required.

Progressive Flex Navigation

A progressive navigation can hold as many links as you need but only displays the first few. How many will depend on the browser/device screen width and the maximum width settings of the links.
This type of navigation is much more user friendly than using conventional drop down and "hamburger" style navigation.

Slide Up Footer

The footer has a grid layout with four columns. It can be either open on page load or hidden and opened/closed using the tab with the chevron icon.
The columns have copyright info and SVG icons for contact or phone, spam protected email and a smooth scroll to the top chevron.

Background

The widget creates a full height background image inserted in three sizes for the various device types. It is inserted in an HTML container rather than in the browser background so that the parallax effect can be applied to it.
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position. At maximum value there will be no parallax effect and the image will scroll with the rest of the page content.

Full Height Parallax Slider

The full width slider has a height of 100 viewport units so that it fils the height of the browser or device window. The slidshow is navigated using directional arrows or grab and drag on computers and swipe on touch devices. The arrows can be hidden on mobile phones. The transition type can be slide or fade and there is an option to autoplay and stop at the last slide.

Parallax MP4 Video

The video autoplays and loops so it should have no soundtrack and the video file size used should be as small as possible. The overlay has a background color control with an opacity slider and a grid layout.
The text container in the overlay has a header, text and an optional CTA style link which can open internal or external pages.

Vimeo & YouTube

The video autoplays and loops so it should be as short as possible. The widget will insert both Vimeo and YouTube videos by entering only the Video ID.
The default video type is YouTube and this is changed to Vimeo by checking a box. The overlay has the same options as the MP4 Video version described above.

Animated Image

The parallax image has an overlay which can animate in using one of the fifteen available animations. Animation time and delay can be adjusted and are set in milliseconds.
By default, the animation is turned off when viewed on mobile phones but this can be turned on if required.

Animate In Image

The image is centered in the browser with a maximum width setting and can animate in every time it enters the viewport. It is inserted in an HTML5 <figure> element and has alt text and an optional caption.
This is not a parallax scrolling item but has a choice of 15 animation types using a custom stylesheet for greater efficiency.

Animate Two Images

This is similar to the single image version except there are individual controls for animating each image, a control for setting the grid gap and a control for setting the break point at which the right image moves bellow the left.
Each image has its own controls for setting the animation type, time and delay.

Animate Text & Image

The text area can be located to the left or right of the image. Below the breakpoint the image or the text can be on top.
The text section has a heading, an optional span for price/date, a paragraph and an optional link. The link can be aligned left, center or right and open internal or external pages and has a new window option.

Parallax Image - Overlay List

The parallax list widget has an overlay with a grid layout and two columns. The list can be placed in the left or right column when viewed on browser/device screen widths above the break point. Below the break point the list is centered. The list markers are created using CSS so that the size and color can be changed and there is a choice of 15 marker types.

© EverWeb Widgets -