ThemeKit UI

ThemeKit Sticky Stuff

Sticky Images

ThemeKit Sticky Images 1

Scroll Images

Header

Optional header with optional chevron down icon. to indicate scrolling is required.

Sticky Stack
ThemeKit Sticky Images 2

Scroll Images

Position Sticky

Sticky scroll images with overlay caption on hover.

Split Scroll
ThemeKit Sticky Images 3

Image

Picture

Images in three sizes using the HTML5 <picture> element.

Scrollbox
ThemeKit Sticky Images 4

Caption

On Hover

Heading, optional span. text and optional internal/external link.

Horizontal Scrollers

Scroll Sticky Images

Using a container to display images on scroll - one at a time - saves a lot of space and makes for a better visitor experience on small maobile devices.
The container has an optional header and has controls for adding a border and/or box shadow.
Caption
The captions have a heading, optional styled span. text and an optional link. They have a max width setting and can be vertically aligned top, center or bottom.
The captions can appear on hover on computers/laptops.
Links can be globally assigned to open internal or external pages.

Images

The images have a lazy loading option and are inserted in three sizes for the various devices.
The images in the demo are …

  • Large Image: 960 x 540px - file size KB
  • Medium Image: 720 x 405px - file size 110KB
  • Phone Portrait Image: 375 x 540px - file size 55KB

Setup

Like many widgets created by EverWeb Widgets this one goes the extra mile to allow all the items to be in view on the EverWeb design canvas.
Set the edting height and then hide the overflow after entering the caption content.

Image Grid + Sticky Sidebar