ThemeKit On Scroll

On Scroll Jumbotron

Jumbotron?

A jumbotron is used to for drawing attention to a new product, latest news or special offer.
The ThemeKit On Scroll Jumbotron has two versions - one with text and the other with two columns containing an image and an article element.
Either version can have a solid color, two color gradient or an image background.
The animation allows the content item(s) to float on scroll. The direction can be horizontal or vertical.
The scroll ratio sets the the distance off axis before scrolling commences. The ratio is variable between zero and 99 and can be positive or negative.

The ThemeKit On Scroll Jumbo [2] widget is shown further down this page. The image is a PNG with the background removed to achieve a better "floating" effect.
Both widgets have the option to add a horizontal navigation.

More
Widgets

Jumbotron Gradient Background

Gradient Background

The ThemeKit On Scroll Jumbotron can have an image, solid color or two color gradient background.
The article element can have a border and/or a box shadow and its height is adjusted using a percentage value for top/bottom padding.
The heading has the option to add a text shadow and letter spacing to thicken up Google hosted fonts with only one font weight.
The navigation links can open internal or external pages and have controls for link min width and link horizontal and vertical spacing.
Jumbo Height
The height of the jumbotron is created by the sum of the text element's height and the percentage value of the top and bottom padding.

On Scroll Jumbo [2]

Image Background

A two column grid with an image and an article element over an image or solid color or two color gradient background.

On Scroll Note

Horizontal Scroll Link

The ThemeKit On Scroll Note widget creates a rectangular or round link with text that transitions horizontally across the page on scroll.
It has controls for width and height. There are controls for border width, color and radius and a checkbox to make it round if the width and height are equal.
Animation
The animation can be left to right or vice versa. There is a control to adjust the starting point. The higher the value the sooner it will be in view.
The transition time adds a float effect and a transition to the link hover background.