Fade Animation & Impress Skin Non Jquery Carousel

Brugen af hot pink og hvid gør denne slider både dramatisk og stilfuld og er alletiders for kvindelige bloggere, modedesignere, og enhver, der gerne vil have den fantastiske hot pink farve!

Slideren er fuldt ud responsiv og har en pink kant, der er med til at adskille den fra resten af hjemmesiden. Det ville se specielt dramatisk ud op imod en sort baggrund, men står i kontrast til næsten enhver farve.

Der er en flot billedtekst i nederste venstre hjørne. Denne billedtekst forsvinder i en blød overgang, samtidig med at den falder på plads ovenfra. Det er en ret stærk overgangsvirkning, der forstærker det ‘dristige’ og stilfulde design.

Billedteksten er i hvid font på baggrund af et gennemsigtigt rektangel med afrundede hjørner og en hvid kant. Fordi det er en hvid font, vil du være nødt til at bruge mørke eller farverige billeder — billedteksten vil ikke kunne ses på baggrund af hvide eller lyse billeder.

Teksten står med ‘ubuntu’ font, som er en sans-serif font og er designet til at ses meget tydeligt på skærmen og i et udvalg af størrelser. Resultatet er, at billedteksterne er utroligt letlæselige, selv på baggrunde med lav kontrast.

Hvis du dvæler på det aktuelle billede, får dette tre ikoner til at falde på plads. Disse er ”næste” og ”sidste” pile på hver side og en ”pause/afspil” knap i midten. Disse ikoner har et design, der svarer til billedteksten, i og med at det er hvide ikoner på en gennemsigtig cirkel med en hvid kant. Men hvis man dvæler på ikonerne får det en solid hot pink farve til at glide ind ovenfra og dække kanten. Dette er igen en dejlig overgangsvirkning og en flot design detalje.

På bunden af slideshow’et er en serie gennemsigtige cirkler med hvide kanter. Disse vil give brugeren en anden måde at navigere gennem slideshow’et på. Hver cirkel repræsenterer et billede i slideshow’et og hvis man klikker på en af dem, navigerer man til dette billede. Den cirkel, der er forbundet med det nuværende billede, bliver helt igennem hot pink (på lignende måde som de andre ikoner) og lader brugeren vide, at vedkommende kan interagere med disse cirkler.

Ved at dvæle på en cirkel, kommer et glidende forhåndsvisningsbillede til syne. Hvert forhåndsvisningsbillede har en pink kant og en lille pil, der peger på den tilsvarende cirkel og lader brugeren se, hvilket billede cirklen er forbundet med.

Fordi slider’en udelukkende er CSS, er den perfekt til smartphones, tabletter og andre mobile enheder. Der er ingen grund til at bekymre sig om loading tid, siden der ikke er nogen image ikoner at downloade. Der er heller ikke behov for browsere uden Javascript eller JQuery. Kort sagt er dette en meget fleksibel slider med et stilfuldt design.