EverWeb Codebox logo

EverWeb Widgetbox 3

HTML Text Content Animate On Scroll

Scroll FX Text Widget

HTML5 Section

This widget creates an HTML5 section element with h1 heading and text which animates in on scroll.
The section can have a transparent background and a 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 section widget
Parallax scroll fx html5 text widget

Widget Settings

Enter the heading text.
Enter the paragraph text. Find out how to enter text as HTML and create line breaks etc.
Enter the font family, check the box if it is Google hosted, select a suitable web safe fallback font and set the font color.
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 values for top/bottom padding and left/right padding as needed.
Set the heading text font size, text align, style and weight.
Set the paragraph font size and the line height.
Set the default hyperlink color and hover color.
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.