Slide Animation & Blast Template Image Slider
Deze slider bestrijkt de volle breedte, is een pure CSS slider en is dramatisch en mooi. Touch-swipe is mogelijk, wat hem ideaal maakt voor tablets en smartphones en hij laadt ook erg snel.
Omdat de slider over de volledige breedte weergegeven wordt, maken de afbeeldingen een maximale indruk, waardoor deze slider een geweldige keuze is voor fotografen en anderen die willen dat de focus van hun site ligt op de afbeeldingen.
Er zijn twee navigatiepijlen en een pause/play-knop die verschijnen wanneer de gebruiker over de slides gaat. Deze gebruiken forse witte symbolen tegen een diepblauwe ronde achtergrond. Ze lijken op hun plaats te ‘vallen’, door in te faden en weer te krimpen. Het is een dramatisch en aantrekkelijk effect, dat omgekeerd evengoed werkt, wanneer de iconen uit de slider lijken te rijzen. Dit alles geeft het design een driedimensionaal gevoel.
Wanneer u over de iconen gaat, verschijnt er een blauwe rand die uit de centrale cirkel lijkt te stralen en dan weer verdwijnt. Opnieuw een modieus en dramatisch effect dat het sliderdesign echt laat opvallen.
De iconen doen precies wat u zou verwachten: door op de volgende/vorige-pijl te drukken wordt u naar de desbetreffende slides gebracht, en op de pause/play-butten drukken laat de slideshow stoppen of juist verdergaan.
De gebruiker kan ook navigeren tussen de slides door de cirkels onderaan het scherm te gebruiken. Deze cirkels zijn diepblauw en representeren ieder een afbeelding in de slideshow. Wanneer een nieuwe afbeelding op het scherm verschijnt, krijgt de relevante cirkel een brede, semitransparante witte rand die de aandacht trekt en de gebruiker helpt te gebruiken hoe de cirkels werken.
Interactie met de cirkels geeft een previewafbeelding in een blauw kader. Dit valt het scherm binnen en verdwijnt op dezelfde manieren als de andere iconen doen. Door op een cirkel te klikken, laadt u die afbeelding in de slideshow.
Iedere afbeelding in de slideshow ‘glijdt’ naar de volgende, naar links of naar rechts afhankelijk van of het om de volgende of om de vorige slide gaat. Wanneer de cirkels gebruikt worden om te navigeren, of wanneer de slideshow zijn einde bereikt en naar het begin teruggaat, doorloopt hij snel alle slides. Dit geeft een natuurlijke, realistische uitstraling die vrij subtiel is, maar de slider toch prettig en organisch maakt.
Een bijschrift staat in de hoek linksonder. Er zijn een titel en een subtitel, beide in witte tekst op een semitransparante blauwe rechthoek. De bijschriften ‘vallen’ en ‘stijgen’ het scherm in en uit op dezelfde manier als de andere iconen en de previewafbeeldingen. De semitransparante blauwe achtergrond laat de kleuren van de onderliggende foto doorschijnen, en geeft het bijschrift een net iets zachtere uitstraling.
De bijschriften gebruiken Duru Sans, een schreefloos lettertype da teen humanistisch en modernistisch design combineert. Het resultaat is erg elegant en geeft het ontwerp een verfijnde feel.
Omdat er geen JQuery, geen javascript en geen plaatjes zijn, is deze slider snel en werkt hij op ieder platform. Het zal ideaal zijn voor mobile-first designers.