Animated Splash Page

Splash pages are usually avoided since they usually have very little text content. This means that there is nothing much for the search engines to index.
This widget solves the problem by animating the splash item in over the page content area on page load and then animating out on click. Since it is an overlay - rather than a separate page - all the main page content is available for the search engines to crawl through and index.
The background image fills the browser or device screen and there is a centered overlay with a heading, optional text and a CTA (Call To Action) style tab to dismiss it.
Images
The images are supplied in three sizes - one for each device type. The ones used in this demo were cropped to 1600px, 1200px and 800px wide respectively before importing into EverWeb.
Overlay Content
The overlay text can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The heading has controls for font size, mobile size, color, style, weight, and letter spacing. The optional text field has controls for font size, mobile size, text align and line height.
The background has controls for adjusting the color and its opacity and the top/bottom and left/right padding.
The overlay has an option for a fade in animation with controls for animation time and delay set in seconds.
The link tab has controls for font size, color, hover color, background color and opacity and border radius.
There is a control for adjusting the vertical spacing of the items in the overlay.
Overlay Animation
The overlay animation fades in and scales up from the center of the browser or device window and the animation time is set in milliseconds.
There is an option - which can be turned on by checking a box - to add an additional animation which also rotates the image through 360° if a more attention grabbing feature is required!
Setup
The widget should be the last item on the page and be situated below the footer. It will be visible on the EverWeb design canvas until the animations are turned on.
As alway, make sure the page content height is set to zero before publishing the page.
This Page
The main feature in this page's content was created using the RGL Hero Image widget. In this case it is used with the animation feature turned off. Follow the link below for more info.
Splash Page
These pages are useful for drawing visitors attention to special promotions or events. Find out more about splash pages and how to use them by clicking the link below.