EverWeb Codebox logo

EverWeb Widgetbox 3

Text Wrap Image Animate On Scroll

Scroll FX Text Wrap Image Widget

Text Wrap Around An Image

This widget creates an HTML5 section element with h1 heading and text wrap around an image 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 text wrap image widget

Widget Settings

Enter the heading text.
If the paragraph above the wrap text is required, check the box to display it and enter the text. Find out how to enter text as HTML and create line breaks etc.
Choose the image and enter alt text for SEO.
Set the image percentage width and float.
Enter the wrap text.
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 adjust the line height to alter the way in which the text wraps around the image.
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.

Parallax scroll fx text wrap image widget
Parallax scroll fx text wrap image widget

This widget is included in the Scroll FX widget pack.