Fullscreen 'SiteShow' with Controls (no jQuery)
Fade-in a list of web pages/ URLs as a fullscreen 'SiteShow' with CSS3 animations. Slide duration can be configured individually, and a hover/ tap in the upper-left corner reveals a menu with previous, next, play/ pause controls for easy administration.
Works in modern browsers and IE9+ (no fade effect in IE9).
Please view the source of this page for HTML markup, CSS and JS.
Please note that the demo above has been contained in a wrapper div so that all of this extra info could be added to the page. Head over to the fullscreen version to see what it really looks like.
Adding 'Slides' to the 'SiteShow'
Just change the markup of the 'Menu' list to manage the slides that appear in the SiteShow;
<ul> <!-- params: data-sec = slide duration in seconds, data-src = web page/URL -->
<li data-sec="5" data-src="http://fast-edit.co.uk/" >Fast Edit</li>
<li data-sec="10" data-src="http://fast-apps.co.uk/" >Fast Apps</li>
<li data-sec="12" data-src="http://fofwebdesign.co.uk/" >Focus On Function</li>
</ul>
The script will pick up all the <li>s, along with their duration in seconds (data-sec) and page URL (data-src), and add them to the SiteShow slide cycle, in the order that they appear in the markup.
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.