Fade Animation & Sheer Template Javascript Slideshow

This is a relaxed, cute and playful slider design with a slightly feminine look and feel. It would be perfect for websites with an arts-and-crafts focus, for bloggers, or for romance and chick-lit authors.

The design uses a purple and white color scheme, rounded corners, and transparency to create a soft, slightly casual look. Of course, everything can be tweaked and customized in cssSlider so that the resulting slider blends seamlessly with your website.

Hovering over the slideshow causes additional UI elements to appear. These three buttons fade and shrink gently into place. They are formed of transparent circles and icons with semi-transparent white borders. The use of transparency means they are quite discreet and out-of-the-way, allowing the images to show through. Hovering over one of the icons causes it to turn into a solid purple circle with a white icon, which makes it more noticeable and encourages the user to click on it.

A series of bullets at the bottom of the slideshow allows people to go directly to the image they are most interested in. These bullets are also quite discreet, as each one is a small, semi-transparent white dot. When highlighted, the dot turns transparent and gains a thin white border.

Hovering over one of the dots causes a preview of the slide to drop and fade into place. This movement catches the eye and means people will quickly realize the purpose of the bullet navigation. As you would expect, clicking on the dot loads the slide into the slideshow.

Each image in the slideshow has space for a caption in the left corner. This is a semi-transparent white rectangle with rounded corners, with purple text. The caption uses the font ‘Raleway’, an elegant sans-serif typeface that is both fun and extremely legible.

The captions ‘swell’ into place, seeming to expand in size very quickly, almost appearing to ‘pop’ into place. The resulting effect is fun and attractive.

The slider design uses the ‘Fade’ change effect. This means that each new image fades quickly in and the previous image fades quickly out. It is quite a subtle and simple transition, which again allows the focus to remain on the images and does not distract from them.

As befits a modern slider, this theme does not use javascript or Jquery to handle any of the UI elements or transition effects. Instead, the slider uses only css3. The benefits of this are numerous, but the main ones include the speed at which the slider loads and the smooth and beautiful animations that are possible. As you would expect, the slider is responsive, resizing itself to fit the size of the display screen. As such, this slider is an excellent choice for anybody who wants a relaxed slider design that still has powerful functionality and a reliable framework.