EverWeb Codebox logo

EverWeb Widgetbox 3

Figure & Link Animate On Scroll

Scroll FX Figure Link
Scroll FX Figure Image Caption

Image Insert

This widget inserts an image with caption alt text for SEO in an HTML5 figure element which animates in on page scroll.
The figure can have rounded corners, a box shadow and variable padding.
The figure link version creates the image as a hyperlink to an internal page or external page or file with the option to open in a new window.
Go to the DEMO page to see it in action.

Parallax scroll fx figure widget

Widget Settings

Choose the image and enter alt text for SEO and the image caption.
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.
Enter the font famly, check the box if it is Google hosted and set a suitable web safe fallback font.
Set the caption font size, color and text align.
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.
For an internal link to one of the pages of the site, use the "Link to;" control to choose the page.
For a link to an external page or file, check the box and enter a relative or absolute URL.
For either type of link, check the box if it is to open in a new window.

Parallax scroll fx image hyperlink widget

This widget is included in the Scroll FX widget pack.