• Responsive
  • CSS3
  • Wordpress  slideshow
  • CSS  carousel
HTML image carousel

Slide Effect & Blast Theme Image Slider

Denne slideren er en fullbredde CSS-basert slider som er dramatisk og vakker. Den er berøringsaktivert som gjør den ideell for netbrett og smarttelefoner, og den laster også veldig raskt.

Fordi slideren har full bredde, får bildene maksimal visning, noe som gjør at denne slideren er et ideelt valg for fotografer og andre som ønsker å ha fokus på bilder på sine nettsted.

Det er to navigasjonspiler og en pause/spill av-knapp som kommer til syne når brukeren peker på bildene. Disse bruker halvfete hvite ikoner på en dyp blå sirkelformet bakgrunn. De synes å ‘dryppe’ i posisjon, fader inn og synker ned. Det er en dramatisk og attraktiv effekt som som fungerer like godt i motsatt rekkefølge når ikonene synes å ‘heve seg’ ut av slideren. Det hele gir designet en tredimensjonal effekt.

Når man peker på ikonene oppstår en blå ramme som synes å stråle ut fra den sentrale sirkelen og så fade ut. Dette er nok en stilig og dramatisk effekt som virkelig gjør at dette sliderdesignet utmerker seg.

Ikonene gjør nøyaktig det du forventer: å klikke på neste/forrige-pilene tar deg til de relevante bildene, og å klikke på spill av/pause-knappen vil enten starte eller stoppe bildevisningen.

Brukeren kan også navigere mellom bildene ved å benytte sirklene nederst på skjermen. Disse sirklene er dyp blå og hver av dem representerer et bilde i lysbildevisningen. Når et nytt bilde flytter til visningsfeltet, får den aktuelle sirkelen en halvt gjennomsiktig halvfet sirkel som trekker blikket mot den og hjelper brukeren til å forstå hvordan sirklene fungerer.

Peking på sirklene forhåndsviser bilder i en blå ramme. Forhåndsvisnings-bilder drypper inn og flyr ut på samme måte som de andre ikonene gjør. Å klikke på en sirkel laster bildet inn i bildevisningen.

Hvert bilde i bildevisningen ‘sklir’ over i det neste, enten til venstre eller høyre avhengig av om det er det neste eller det forrige bildet. Ved å bruke sirklene for å navigere til et bilde to eller tre bilder unna, eller når bildevisningen når ‘slutten’ på bildene og går tilbake til begynnelsen, kjører den raskt gjennom alle bildene. Dette gir en naturlig og ‘realistisk’ følelse som er ganske smart og som gjør at slideren virker vennlig og organisk.

Det er en bildetekst i nederste venstre hjørne. Det er en tittel og en undertittel som begge er i hvit tekst på en halvt gjennomsiktig blå rektangelformet bakgrunn. Bildetekstene ‘drypper’ og ‘hever seg’ inn og ut på samme måte som de andre ikonene og forhåndsvisningsbildene. Den halvt gjennomsiktige blå bakgrunnen lar fargene i bildet under vises gjennom den, og gjør at bildeteksten virker litt mykere.

Bildeteksten benytter ‘Duru Sans’, en sans-serif font som kombinerer et humanistisk og modernistisk design. Resultatet er svært elegant og gir designet et sofistikert utseende.

Fordi verken Jquery, javascript eller bilder benyttes, er denne slideren rask og fungerer på alle plattformer. Den er perfekt for mobil-designere.