• HTML5
  • bootstrap carousel
  • CSS
  • HTML5  slider
bootstrap carousel

Zoom Transition & Geometric Design Bootstrap Carousel

Denne slider gør brug af vinkelrette hjørner og geometriske former til at skabe et meget moderne maskulint design, der udstråler meget autoritet.

Slideshow’et har en meget tynd hvid kant, der akkurat er nok til at hjælpe det stå i kontrast til resten af webstedet. Det ville være effektivt imod en mørk eller sort baggrund.

Selve det store slideshow benytter en ‘zoom’ overgangsvirkning til at gå fra det ene billede til det andet. Denne effekt zoom’er ud af det første billede og zoom’er ind på det næste, idet det kombinerer zoom’et med en blød overgang. Det har masser af bevægelse og fanger blikket.

Der er en billedtekst i det nederste venstre hjørne. Denne billedtekst bruger fonten ‘Open Sans Condensed’, som er en sans-serif font, der giver en ret autoritær fornemmelse.

Billedteksten er hvid tekst på et gennemsigtigt rektangel med en tynd hvid kant. Der er masser af plads i rektanglet, hvilket er med til at understrege den skarpe, firkantede fornemmelse. Der er både en titel og en undertitel, og titlen falder ned ovenfra, mens undertitlen glider ind fra højre side. Fordi de glider ind fra forskellige retninger og mødes i et hjørne, er det igen med til at forstærke det firkantede look, og det er med til at skabe en sammenhængende fornemmelse hele designet igennem.

Hvis man dvæler på billedet, fremkommer der navigationsikoner. Disse er to tynde hvide pilespidser på hver side af billedet. Hver pilespids er som et kvadrat, der er sat på spidsen og halveret. Disse pilespidser glider på plads fra midten af slideshow’et.

Der fremkommer også en pause/afspil knap i midten, og dette er simpelthen et hvidt ikon, der stiger på plads.

Hvis du dvæler på nogen af ikonerne, får det dem til at bevæge sig en anelse, en diskret rollover effekt, der lader brugeren vide, at man kan interagere med dem.

Der er en serie gennemsigtige rektangler med hvide kanter forneden. Hvert rektangel repræsenterer et billede i slideshow’et. Hvis man dvæler på et rektangel, får det et lille forhåndsvisningsbillede til at dukke op, og hvis man klikker på et rektangel, læses dette billede ind i visningsområdet.

Det rektangel, der er forbundet med det nuværende billede har en tykkere kant for fokus.

På grund af det firkantede, autoritære design ville denne slider være alletiders til fitness websteder, der specialiserer sig i udfordrende træning, især styrketræning. Det ville også være alletiders til finansielle websteder, der ønsker at gøre et troværdigt indtryk.