Cube Animation &
Fresh Design 3d slider jquery
This slider is both friendly and modern in appearance. It uses a unique transition effect from slide to slide that catches your attention and really works well. In addition, it is user-friendly thanks to the use of preview images.
The main slides do not have a frame or border, but do have slightly rounded corners. These rounded corners help to soften the edges of the image, and create a friendly feel whilst the lack of a frame or border makes the slider feel modern.
Down the left-hand side of the slider are a series of preview images, stacked vertically. Each one has a white border with a rounded frame, which again feels friendly but still modern and clean. When the current slide appears in the slider, the preview image’s border turns an attractive dark green/blue.
By hovering your mouse over the top or bottom preview image, you can scroll through all of the preview images and select the one you want to look at. In addition, each image that you hover over experiences a subtle color change, turning slightly darker and richer. This helps signal to the user that you can click on the preview image to change the main slide.
On the main slide, in the bottom-left corner, is a space for a caption. There is a main title, which is in bold white lettering against a dark green/blue background and a subtitle, which is in smaller grey text against a white background.
The font used in the caption is ‘open sans’, a humanist sans serif font that is natural and friendly in appearance, yet modern thanks to it’s clean appearance and open forms.
When you hover over the main slide, two small dark grey semi-transparent circles appear, containing a completely transparent arrow head. These navigation arrows allow you to click through the slides at an accelerated rate. They are subtle in appearance, but the use of a circle shape reinforces the rounded corners of the slides and the overall ‘soft and friendly’ feel of the slider.
The default transition effect is ‘cube’, which acts as though each slide is pasted on one side of a cube. As the cube turns, new images appear. It is reminiscent of a toy block for children, and again reinforces the friendly and almost playful feel of the slider.
There are a number of change effects to choose from. ‘Brick’ and ‘book’ both keep the friendly, blocky feel of the default transition effect but would work better for a slightly older audience.
Because this slider is both friendly and modern, it would work well for almost any customer facing website. In particular, websites aimed at children and parents would benefit from using this slider, as would family-friendly restaurants. Bloggers would also benefit from the mix of friendliness and clean modern lines.