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.
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.
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
Image Hyperlink New Window
Parallax Background Image
This demo page has a composite background image which was created in Keynote. The widget uses jQuery to alter the scroll speed of the background in relation to the content.
This text is in a section element with an h1 HTML heading. Since it appears on page load it doesn't really need the on scroll animation. Any of the on page load animation widgets can be use instead.
The widget has a zoomInLeft animation with a 2 second delay.
The image below is created with the below SFX Image Hyperlink widget which inserts an image with alt text and creates it as a hyperlink. The link can be an internal using the "Link to:" control or to an external page or file by inserting the URL in the box. The links can be set to open in a new window if required.
There is also a version of the widget to insert an image without a hyperlink.
Scroll FX 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!