KenBurns Transition & Material Style Jquery Gallery
This theme for cssSlider is an attractive design, with a slightly retro feel, that is ideal for websites focused on IT software or hardware. It uses two shades of blue and two shades of grey. This color scheme attracts the eye and makes the slideshow stand out from any website. The use of drop-shadows updates the otherwise retro design aesthetic.
The carousel does not have a border or frame. There is a faint drop-shadow around the image, that helps lift it off the page. When you hover over the image, this drop-shadow expands and becomes softer. This is a beautiful and extremely subtle attention to detail that many people will not notice, but really helps this design stand apart.
When you hover over the main image, three blue buttons appear. These are additional navigation elements, that allow the user to interact with the slideshow. Each one is a blue circle with a white icon. There are two arrows which allow the user to cycle through the images in the slider, and a pause button which allows the user to stop the slideshow from automatically playing.
Hovering over one of these icons causes it to go a slightly darker shade of blue, and for the drop-shadow to shift. Again, the overall effect is quite subtle and shows that the designer has paid a lot of attention to small details. The overall effect creates a tactile feel, and encourages the user to click on the icons and interact with the slideshow.
Each image in the slideshow has a caption in the lower-left corner. There is a title, which is white text on a blue rectangle, and a subtitle which is dark-grey text on a pale grey background. These rectangles ‘bounce’ into place from the top and bottom of the slideshow, the motion is smooth and the way the rectangles ‘bounce back’ slightly as they settle into place is another example of the attention to detail in this design.
There is also a series of circles in the bottom-center of the slideshow. This is the ‘bullet navigation’, and allows users to skip between different slides in the slideshow. Each of these circles is blue, that darkens to highlight the bullet that represents the current image in the slideshow. If the user hovers over a circle, they bring up a preview image of the slide in a thick grey frame with a drop-shadow. Clicking on the circle then loads that slide.
Each image in the slideshow slowly zooms and fades into the next. This transition effect is called ‘Kenburns’ and the continuous movement is eye-catching, and gives the slideshow a lot of life.
The design is responsive and quick loading, and the attention to detail really makes this theme something special.