Thank you for visiting the Focus on Function Web Design website and printing this page.
I hope you'll visit online again soon at www.fofwebdesign.co.uk
Demos & Snippets
Below are some random scripts I have tinkered with. Take a look! You may find something useful. See more freebies for websites this way.
Image Orientation Detection (JS) | Created: 15th Sep 16
Detect whether images are landscape or portrait and dynamically apply a CSS class with JS. Style portrait images one way, and landscape images another!
Img Src to Background-Image (object-fit:cover) | Created: 23rd Jun 16
Convert an img src attribute into a background-image with JS, so that background-size:cover can be applied. Polyfill for object-fit:cover in IE/ Edge.
Pop-up Image Viewer with Entrance Effects | Created: 27th May 16
A responsive, pop-up image with on-demand image loading. A spinner shows while loading, then an image zooms, fades, sweeps or drops in to view.
On-Demand Animated GIF Player (JS) | Created: 16th Dec 15
Responsive 'Ken Burns' Slideshow + Captions | Created: 5th Oct 15
A responsive, cross-fading slideshow with CSS3 'Ken Burns' panning and zooming animation, and captions that sweep in from the bottom right corner.
Responsive CSS3 Cross-Fading Slideshow | Created: 17th Jun 15
A simple cross-fade slideshow, powered with a few lines of JS. Stacked media queries serve smaller images to mobile. Retina image technique included.
Responsive CSS3 Fade-To-Black Slideshow | Created: 15th May 15
Responsive CSS3 Fullscreen 'Ken Burns' Slideshow | Created: 8th Mar 15
Responsive Modal Overlay/ Pop-up Image Viewer | Created: 11th Jan 15
A responsive, pop-up image viewer with on-demand image loading. The modal overlay is triggered by a small JS function, and styled with CSS.
Responsive Fullscreen Image with Content Below | Created: 1st Dec 14
This fullscreen image always fills the initial viewport, regardless of device or screen size. Content is placed underneath for maximum visual impact.
CSS3 Grid Images - Fluid Scale, Responsive | Created: 24th Sep 14
A responsive grid of images that resize fluidly as screen size changes. Includes online calculator to easily calculate image margins and width % per row.
Responsive CSS3 Diamond Grid Images | Created: 28th Aug 14
Four demos for grids of images that are rotated 45 degrees; Two demonstrate fluid scaling, and two have images that overflow as the screen narrows.
3 Ways to Resize/ Scale Images in RWD | Created: 14th Aug 14
A look at visual image manipulation using fixed ratio, target ratio and fluid ratio techniques. Includes online calculator to calculate a 'sloping scale'.
Have fun using these free scripts, and if you have any ideas for more, feel free to contact me.
Get FREE goodies for your website
See examples of my other work
If website enhancements and fancy extras are what floats your boat, please explore some of the scripts and softwares I've developed, and also visit some of the websites I've created. For pretty visuals, head over to my graphics, artwork and logos for a splash of creativity.