Slide Animation & Speed Style Responsive Slider

Denna slidern har en simpel men rolig design som använder sig an vitt och blått, en kombination som ser naturlig och välkomnande ut.

Då designen bara använder sig av CSS går det snabbt att ladda. Designen är responsiv och kan visas på de flesta plattformer, även de med javascript deaktiverat.

Slidern har ingen kant, vilket gör så att bilderna blir i huvudfokus. När muspekaren hålls över slidern visas två pilar för navigering. Det ser ut som att de snurrar på plats från fyra små punkter, en skojig övergång som är ögoninfallande. Om man lämnar sliderytan så snurrar de iväg och imploderar in i fyra punkter, som sedan försvinner. Navigationspilarna är vita och har en något rund känsla vilket stärker känslan av att den är rolig och vänlig. Den befinner sig i en genomskinlig cirkel med vita kanter.

Du kan använda pilarna för att växla mellan bilderna.

Du kan också navigera mellan dem genom att använda de vita prickarna vid botten av slidern. Dessa cirklarna har genomskinliga kanter med en vit ring utanför det - vilket skapar ett intryck av dubbla cirklar. Varje cirkel representerar en bild. Den bilden som visas cirkel blir blå och får en vit cirkel runt sig and sedan en halvgenomskinlig vit kant runt det, vilket skapar en trippelcirkeleffekt som påminner om en piltavla eller annat mål.

Om man håller över bilden tar det fram en förhandsgranskingsbild i en vit ram som har en vit pil i botten som pekar på cirkel som representerar den. Denna förhandsgranskning sätter sig på plats med en lätt studs, på samma vis som titlarna gör.

Genom att klicka på en cirkel navigeras användaren direkt till den bilden som denne är mest intresserad av.

Det finns en möjlighet att visa text i det vänstra nedre hörnet. Detta består av en titel och en undertitel. Titeln är blå text på en vit rektangel med rundade hörn. Undertiteln är vit text på en rektangel med rundade hörn som har vita kanter. Båda ökar i storlek över lite tid och när de har uppnått rätt storlek studsar det till lite. Igen, det känns välkomnande och lite kul.

Typsnittet som används är Hamersmith One, som har en udda, nästan naiv handskriven stil. Detta är ett typsnitt som har utvecklats speciellt för lågkontrastsinställningar och för att läsas på en skärm, så det är mycket lättläsligt.

Övergångseffekten på detta demot är “slide”, vilket betyder att bilderna skjuts på plats från höger eller vänster. Skjutningen börjar snabbt och saktar sedan ner, en fin effekt som får övergången att kännas stilren och modern. När det når slutet av bilderna skjuter den tillbaka till början, vilket visar alla bilderna och ger ett intryck av att bilderna är på en filmrulle.

Denna designen kan användas på nästan alla hemsidor som behöver en fräsch stil som fortfarande har en lite udda, rolig känsla. Det passar bra för bloggare, författare, förlag och familjevänliga restauranger.