KenBurns Effect & Basic Layout Non Jquery Slider

This skin has a simple, minimalist feel that is clean and welcoming. The design uses only CSS, no JQuery or Javascript, which makes it incredibly quick to load, completely responsive and can be used on a wide variety of platforms, even ones with javascript disabled.

It uses two shades of pale blue and dark grey, which stop it from feeling too stark and simple.

There is no frame around the slider, which means images take center stage. Two navigational arrows display when you hover over the image. They seem drop into place from above, with a smooth fade. It is a slow and smooth transition effect. The arrow is a dark grey, thin arrow-head. It sits on a pale blue circle. Hovering over the arrow turns the circle white, and the arrowhead shifts left and right. The movement attracts the eye, and encourages the user to click on it.

Clicking on one of the arrows cycles the user through the images.

In the bottom-left corner is a caption, comprised of two titles. They both have grey text on a blue rectangle with rounded corners. The title rectangle is a slightly darker shade of blue, and the sub-title rectangle is a grey-ish, very light blue.

The title bounces in from above, and comes to a stop overlapping the sub-title rectangle. The sub-title bounces in from below. The text inside bounces even more, creating a realistic sense that the rectangles have come to a halt, and the inside text has been shaken in response. It is a very attractive and eye-catching transition, which still maintains the simple and clean design style of the template.

The font used is Open Sans Condensed, a humanist sans-serif typeface that is neutral, simple and yet friendly.

At the bottom of every slide are a number of blue circles. Each one indicates an image in the slideshow. The circle that represents the image on display in the slideshow has a grey dot in the center.

Hovering over a circle causes a preview image to display in a blue frame, and with a blue arrow at the bottom pointing to the correct circle. This preview image slides into place from above, in the same way as the navigational arrows.

Clicking on a circle loads the relevant image into the slider. This is a greta way to allow someone to navigate to the image most relevant to them.

The change effect on this demo is 'kenburns', a modern, simple transition where each image slowly zooms and fades into the next one. It is a change effect that creates a sense of constant, relaxed movement, like you are watching the world slip by. It works effectively with the simple but modern slider design.

This design is flexible enough to be used for almost any website that wants a modern, clean design. It is extremely professional looking, and would be perfect for technology websites, website builder software companies, and so on.