HTML5 Figure Element

In most cases, images benefit from having a caption - both for the surfers and the search engine spiders.
A caption inserted in a separate text box is next to useless from the SEO point of view. Inserting the image and its caption into a figure element overcomes this problem and also allows the caption to move with the image is it animates in on page scroll. The keywords in the caption are supplemented by those in the alt text field.
There is also a version of this widget which creates the image as an internal or external hyperlink which can open in a new window if needed.

© Roddy McKay - 2015 - All Rights Reserved

SFX Text Wrap Widget

This is the first paragraph which preceeds the image and is optional.

SFX Parallax text wrap image widget

This is the wrap text.
The image itself has ajustable width which is expressed as a percentage of the container width.
The image can be floated either left or right.
These line breaks are created using an HTML5 line break which is <br>.
The container is style using an RGB background color so that the opacity can be varied to increase the impression of the object floating over the parallax scrolling background. It can have rounded corners, a box shadow and the padding can be adjusted.
There are options for styling both the heading for text size, font weight, style and alignment.
The hyperlink color and hover color can be set.

Testing

Creating a page with animated content takes time and patience.
Since the animations can't be seen on the EverWeb design canvas, it is essential to test the functions using the Preview button or publishing to a local folder everytime an object is added.
When testing on a computer, remember to adjust the height of the browser window to get an idea of how the objects will animate in on devices with different screen heights.
Obviously this type of design is unsuitable for use with mobile devices.
Remember that a percentage of visitors will be viewing the page using tablets so it is essential to test the results in the iOS Simulator or on an actual device before deciding to use the widgets.
It should be obvious that all these scroll animations are implemented when scrolling down the page and they only happen once.
NOTE how this behavior changes when reverse scrolling on an iPad or similar device.

Keep It Simple

Scroll FX Figure Widget
MacBook Air

Image Hyperlink New Window

Scroll FX Image Hyperlink Widget

Image Insert

Static Background Image

The iPad version of the Parallax Scroll FX demo page has the same content as the full site version but without the animations.
The background image was inserted using the Background Image widget.
The page content width has been reduced to 780px.
The full site version of the page has some javascript pasted into the head code box to divert tablet users to this version…

<script type="text/javascript">
if (screen.width <= 1081) {
window.location = "ipad.html"; }
</script>

… where ipad is the page file name.

Scroll FX iPad Demo

Building A Page

Start with a completely blank canvas, set the background color to one which will allow the text content to be seen while creating it and set the page background to "None".
Insert the background image widget first and then the rest in order of appearance.
The animation duration for all the widgets should be set just before the page is due to be published since the animation will cause the content to disappear or do something weird!