EverWeb Codebox logo

EverWeb Widgetbox 3

HTML Heading Animate On Scroll

Scroll FX Heading Widget

HTML Heading

This widget creates an h1, h2, h3 or h4 HTML heading which can be animated in on page scroll.
The heading can have a transparent background and box shadow to enhance its visibility when inserted on a parallax background.
Go to the DEMO page to see it in action.

Parallax scroll fx html heading widget

Widget Settings

Enter the heading text.
Enter the font family, check the box if it is Google hosted an choose a suitable web safe fallback font.
Select an appropriate heading type - h1 through h4.
Set the heading font size, color, style, weight, text align and letter spacing.
Open the color window and choose the required background color.
Open the "Color Sliders" tab to get the RGB color numbers and enter them into the widget settings.
Set the background opacity.
Set the corner radius.
Set the box shadow color and radius if required.
Adjust the value for top/bottom padding.
If the heading text is aligned left or right, adjust the left/right padding as needed.
Choose the animation type.
Set the animation duration.
The animation duration for this - and any other animated widgets on the page - should be left until immediately before publishing the page.
NOTE: When the animation duration is set, the contents of the widget will fade, disappear or do something weird depending on the animation type and duration.

This widget is included in the Scroll FX widget pack.