Slide Transition & Blast Style Image Slider

Det här bildspelet i full bredd, som endast är till CSS, är dramatisk och vacker. Den har aktiverade svepgester, vilket gör den idealisk för surfplattor och smarttelefoner, och den laddar också väldigt snabbt.

Eftersom bildspelet har full bredd får bilderna maximal styrka, vilket gör det här bildspelet till ett bra val för fotografer och andra som vill att deras hemsidas fokus ska ligga på bilderna.

Det finns två navigationspilar och en paus/start-knapp som dyker upp när användaren interagerar med eller ”svävar” över reglagen. Dessa använder feta vita ikoner mot en mörkblå cirkulär bakgrund. De verkar ”falla” in i position, blekna bort och krympa. Det är en dramatisk och attraktiv effekt som fungerar lika bra tvärtom, när ikonerna ”stiger” av bildspelet. Hela grejen ger designen en tredimensionell känsla.

Att sväva över ikonerna skapar en blå kant som verkar stråla ut från mittcirkeln och sedan blekna bort. Återigen är det en stilren och dramatisk effekt som verkligen gör att det här bildspelets design utmärker sig.

Ikonerna gör precis vad du kan vänta dig: att klicka på nästa/föregående-pilarna tar dig till de relevanta bildspelen, och att klicka på starta/paus-knappen kommer antingen stanna bildspelet eller starta det.

Användaren kan även navigera mellan bildspel genom att använda cirklarna längst ner i mitten på skärmen. Dessa cirklar är mörkblå, och varje cirkel representerar en bild i bildspelet. När en ny bild flyttas in i visningsskärmen får den relevanta cirkeln en halvtransparent fet vit kant som drar till sig blicken och hjälper användaren förstå hur cirkeln fungerar.

Att interagera med cirklarna visar en förhandsvisning av en bild i en blå ram. Denna förhandsvisning faller in och flyger ut samma håll som de andra ikonerna gör. Att klicka på en cirkel laddar sedan den bilden till bildspelet.

Varje bild i bildspelet ”glider” till nästa bild, antingen åt vänster eller höger beroende på om det är nästa eller föregående bild. När man använder cirklarna för att navigera till en bild som är två eller tre bilder bort, eller när bildspelet når slutet av bilderna och går tillbaka till början, går den snabbt igenom alla bilderna. Detta ger den en naturlig, realistisk känsla som är ganska subtil, men gör att bildspelet känns vänligt och naturligt.

En bildtext finns i vänstra hörnet längst ned. Det finns titel och undertitel, båda är av vit text på en halvtransparent blå rektangel. Bildtexterna ”faller” och ”reser” sig in i och upp från sina platser på samma sätt som de andra ikonerna och förhandsvisningsbilderna. Den halvtransparenta blå bakgrunden tillåter den undre bildens färger att lysa igenom, och ger bildtexten en något mjukare känsla.

Dessa bildtexter använder Duru Sans, ett sans-serif typsnitt som blandar en humanistisk och modernistisk design. Resultatet är väldigt elegant och ger designen en sofistikerad känsla.

Eftersom det inte finns något JQuery, inget javascript och inga bilder är det här bildspelet snabbt och fungerar på alla plattformer. Det kommer vara perfekt för designers som främst använder mobilen.