ThemeKit On Scroll

Swing Image

Swing Image On Scroll

Container
The swing on scroll item is an HTML <figure> element with the optional text and optional link in the <figcation> for better search engine indexing.
The image is inserted in three sizes and has a lazy loading option. It has controls for adding a border and/or a box shadow.
Animation
The image swings as it is scrolled out of the viewportand has a control for setting the rotate angle on the X-axis.

Swing Text On Scroll

The text container has a swing on scroll animation with controls for setting the rotate angle on the X-axis and the perspective value in vw (viewport width units).
The content items are …

h1 heading and a text box
Optional list with comprehensive styling options
Optional h2 and text block
Optional internal/external CTA (call to action) style link

Styles

The container can be styled with a border and/or a box shadow. The wrapper can have a solid or two color gradient background and has controls for top, horizontal and bottom spacing.
Border
When both a border and a box shadow are added to a text container a professional touch ican be added by having a control to remove the bottom border.
Link Hover
Links are more functional and better in design when they havea solid background and a background color hover animation. The animation is applied by adding a transition to the background color property.

Animated Row

Swing On Scroll Article

The article has an inner grid with two columns containing an image in one column and a text block in the other.
The layout can be switched and the relative column widths adjusted.
Styles
Each item has controls for adding a border and/or a box shadow.

Article Content

The article text area has a heading and text and controls for adding styled spans.
Link
The optional link has a background hover animation and can open an internal or external page.

onScroll Row

Swing onScroll Widgets

The ThemeKit Swing onScroll widgets rotate the item on the X-axis as the page is scrolled. A slider control adjusts the rotate angle.
Perspective
Adding perspective creates a sense of depth and can be effective when applied to items rotated on the X or Y-axis.
Perspective is usually expressed in pixels but, when used in a responsive design using viewport width units creates a better effect.
The default value for perspective in these widgets is 250vw. Reducing the value will increase the effect.

Styles

The containe can be styled with a border and/or a box shadow. The wrapper can have a solid or two color gradient background and has controls for top, horizontal and bottom spacing.
Border
When both a border and a box shadow are added to a text container a professional touch ican be added by having a control to remove the bottom border.
Link Hover
Links are more functional and better in design when they have a solid background and a background color hover animation. The animation is applied by adding a transition to the background color property.