Sticky Heading

Fade Out Text On Scroll

This is an HTML5 section element with h1 heading and text.
The container and its contents fade out at a preset scroll distance which, in this case, is 160px.
Both the container and the text content have many styling optios.
This item can be used in conjunction with the fade out heading shown on the previous page.

Full Width Sticky HTML Heading Widget

Widget Settings

Choose the container type which can be an article, aside or a section.
Check the box if a heading is required and enter it and then the text content.
Enter the font family name, check the box if it is Google hosted, choose a suitable web safe fallback font and the font color.
Set the container background color and its opacity.
Set a border width, color and corner radius if required.
Set a box shadow color and radius if required.
Set the container top/botton and left/right padding.
Set the heading font size, text align, style and weight.
Set the text font sixe, text align and line height.
Set the text hyperlink color, hover color and text decoration.
Scroll Distance:
Set the scroll distance which is required for the container and its content to fade.

Fade out text Widget
Fade out text Widget

Text Links

Text hyperlinks can be included in the body of the text using a little HTML. Here's how to create one…

<a href="page.html">Link Text</a>

To open the link in a new window &hellip'

<a href="page.html" target="_blank">Link Text</a>

As with all widgets, text entered into the widget settings is HTML so it is necessary to use <br> for line breaks and HTML characters such as &amp; for &.
Single quotes can be used "as is" but double quotes require &quot;

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width