ThemeKit Scroll

Cards & Video

Card Row

The ThemeKit Scroll Cards widget can have two, three or four items with a lot of possible variations.
Each item has its own controls for rotate X and Y both positive and negative an the initial scale and opacity can be adjusted using sliders.
The containers have controls for border width color and radius and for adding a bottom box shadow.

Perspective

While a bottom box shadow can add a sense of depth to a page design it can be enhanced using the CSS property for perspective.
Althoug the value for perspective is more usually expressed in pixels using viewport units is more appropraite for responsive designs.
EverWeb widgets use viewport width (vw) units for perspective. The lower the value - the more the effect until zero is reached and the effect is remove conpletely.

Two Cards

ThemeKit Scroll Cards 1

Layout

Grid

A CSS grid with two, three or four items. When three items are present the last one is centered in row two below the breakpoint.

Content
ThemeKit Scroll Cards

Content

Items

Each item has an image with alt text, a heading, optional styled span, text and an optional link.

Images

Four Cards

ThemeKit Scroll Cards 1

Scroll Banner

Variations

A fairly complex item with up to four animated items over an image in the background.

View Banner
ThemeKit Scroll Cards 2

Vimeo & YouTube

Lazy loading mobile compatible Vimeo and YouTube with animated styled stage.

More Info
ThemeKit Scroll Cards 3

Page Scroll

Down/Up

Easy and convenient page step scroll and scroll to anchors from the scroll menu.

More Scrolling
ThemeKit Scroll Cards 4

Scroll Hero

Image or Gradient

A hero item with scroll info and an image or two color gradient background.

Discover More

Video MP4

MP4 Video in Two Sizes

Responsive Website Video

For best results use self hosted video rather then hosted video like Vimeo and YouTube
A responsive video should show a poster image on page load, have the video file lazy loaded and inserted in two sizes for computer and mobile devices and be preveted from downloading until the visitor decides to play it.
For the best search engine indexing the video should be inserted in an HTML5 figure element with the title inserted as the caption.

Hosted Video

If Vimeo or YouTube must be used make sure it has a lazy loading function to prevent it from having a negative effect on the page download time.

VimeoYouTube

© EverWeb Widgets -

Menu