ThemeKit Scroll Images

Sticky ScrollImage []
Image [2]Image [2]
Image [3]Image [3]
Image [4]Image [4]
Image [5]Image [5]

© EverWeb Widgets -

Scrolling Images

The images scrol vertical in a fixed height container. Each image is in a HTML5 <figure> element with a <figcaption> and alt text. The caption is placed at the top and is sticky so that it remains in view as the image is scrolled.
Slideshow Replacement?
Since the images are lazy loade and there are different sizes of image file for large and small devices, this is a far better option for displaying images than a slideshow - especially if the images are not of a uniform size.
Images
The large images should be cropped to the same width as the slideshow's maximum width setting - in this case 600px - before importing into EverWeb. The mobile version of the images should be reduced to about half that size.
Captions
The captions are made to stick using pure CSS so no Javascript is required for this. They can use a Google hosted font with a web safe fallback and there are controls for font size, color, text align, background color and padding. The top/bottom padding control is used to adjust the caption's height.
Scrollbar
Webkit browser - Chrome and Safari - allow styling of scroll bars using CSS, The widget has controls for the scrollbar height, color, track color and the border radius.
Footer
The optional footer has options for adding copyright info, auto update of the copyright year and a smooth scroll to the top chevron tab. The scroll time is adjustable in milliseconds.
Container
The container is centered with a maximum width setting and has a fixed height. The height can be set in pixels or in viewport units. The example on this page uses viewport units and is set to 94vh.
Using viewport units means that the container can be set to occupy the same proportion of the available vertical space on all devices and, if the value is less than 100vh, it will always remain in view
IMPORTANT NOTE:
At the time of writing, EverWeb can't handle viewport units so it is best to set the container height in pixels while editing the page content and thenswitch to viewport units prior to publishing.