Rotate Transition & Agile Skin Image Gallery

Den här slidern med endast CSS laddar snabbt och är helt responsiv. Den låter användaren använda touch- och swipe-gester för att navigera från slide till slide, vilket gör den ultimat för mobila designers. Den överhängande looken är ren och fräsch, men med några intressanta egenheter. Slidern använder ett färgschema i vitt och orange.

Demonstrationen har inte en ram, och är ganska kvadratisk i sin form. Kvadratformen innebär att slideshowen är väldigt flexibel, och den kan användas för en lång rad olika foton.

Håller man musen över slidebilden visas det två navigationspilar åt de olika hållen, med en paus/spela-ikon i mitten. Navigationspilarna är vita pilar på en orange cirkel, och spela/paus-ikonen är också vit på en orange cirkel. Dessa ikoner 'snurrar' dit, och om du slutar hålla musen över slidern snurrar de och försvinner.

Om användaren håller musen över ikonerna får de fram en andra orange ram runt den orangea cirkeln, vilket skapar en 'dubbelcirkel'-effekt. Navigationspilarna går fram och tillbaka, vilket uppmuntrar användaren att klicka på dem. Genom att klicka på en pil kan man gå fram och tillbaka genom bilderna.

Klickar man på 'paus'-knappen stoppar man slidern från att visa nästa bild och så ändrar man ikonen till en 'spela'-symbol. Klickar man på spela-symbolen börjar det visas igen.

Undertexten sitter i det nedra vänstra hörnet och använder sans-serif-textsnittet ‘Lato’. Texten är vit och är på en orange bakgrund. Det finns både en titel och en undertitel, och de har bägge separata, rektangulära bakgrunder med rundade kanter som kombineras och skapar en fantastisk ny form. Undertexterna zoomas in långsamt en efter en, vilket ger en riktigt organisk känsla.

På botten av sliden finns det en uppsättning orangea cirklar som representerar slideshowbilder. Cirkeln som representerar den nuvarande bilden får en orange ram som skapar en 'dubbelcirkel'-effekt. Att den andra cirkeln är något sned är ännu en snygg touch. Det är en subtil designsak, men det hjälper till i att få designen att kännas organisk.

När användaren håller musen över en cirkel zoomas det långsamt fram en förhandsvisning i en orange ram. De här förhandsvisningarna låter användaren se andra slides som dyker upp, och välja vilken som ska ladda.

Standardtransitionseffekten är ‘rotate’, som snurrar till en ny bild och får fram en ny bild. Den är ren och modern, men med en hel del rörelser.

Designen är modern och rolig, och skulle fungera bra för en lång rad webbsidor. Den repronsiva designen som bara använder CSS gör den perfekt för sidor som är optimerad för mobiltelefoner, så det är fantastiskt för företag som behöver ge information och sälja tjänsterna till folk som är ute – som kommuntrafikssidor, shoppingsidor för 'sista minuten' och turistwebbsidor.