Rotate Transition & Blast Style Slideshow Html

Dit is een helder, kleurrijk en leuk sliderthema voor je website. Het thema gebruikt een vrolijk geeloranje kleurenschema dat je slideshow naar voren brengt. Moderne ‘stuitertransities’ voegen bewegen en leven toe aan je website en trekken de aandacht van je bezoekers.

Dit CSS-only slidersjabloon komt met een aantal elementen die de gebruiker helpen navigeren door de slides. Aan de onderkant van de slider vind je een aantal bullet points. Deze kan je gebruiken om door de verschillende slides te bladeren en eventueel enkele slides over te slaan. Elke cirkeltje staat voor één van de afbeeldingen in de slideshow. Dit wordt gecommuniceerd naar de gebruiker toe door het relevante cirkeltje op te laat lichten en te highlighten wanneer een nieuwe afbeelding tevoorschijn komt. De cirkels zijn geeloranje en worden met behulp van een semi-transparante lichtgrijze rand opgelicht.

Je kan je muis over ieder cirkeltje laten zweven/hoveren, waardoor er een preview van de afbeelding in een semi-transparant oranje kader naar voren komt. Zo kan de gebruiker zelf beslissen welke afbeeldingen hun het meest boeien.

Wanneer je met je cursor over de slideshow zweeft komt ook de rest van het navigatiepaneel tevoorschijn. Deze iconen vervagen in krimpen (fade-and-shrink) tot ze hun plaats invullen, een interessant en uniek effect dat goed past bij de vrolijke sfeer die dit thema wilt uitstralen. Wanneer de gebruiker zijn cursor niet meer over de slideshow houdt zetten de iconen zich uit terwijl ze vervagen.

Er zijn drie iconen. De ‘vorige’ pijl die je links vindt, de pauzeknop in het midden en de ‘volgende’ pijl die je aan de rechterkant terugvindt. Ze komen allemaal met standaardiconen die gemakkelijk te gebruiken zijn. Wanneer je interacteert met één van de iconen activeer je het ‘halo’ effect: een gele cirkel explodeert uit het icoon en vervaagt. Opnieuw is dit effect iets unieks, plezierig en zorgt het ervoor dat het écht leuk is om deze slider te gebruiken.

Meer informatie kan toegevoegd worden aan iedere slide in het tekstveld dat je beneden vindt in de linkerhoek. Dit bestaat uit twee semi-transparante gele rechthoeken met witte tekst. Het thema gebruikt het ‘Duru Sans’ lettertype, wat een nogal klassiek sans-serif lettertype is dat ongelofelijk goed leest en komt met een moderne look.

De tekstvakken staan niet volledig parallel en synchroon met de afbeeldingen van de slideshow, wat het vrolijke, amusante gevoel van deze slider verder versterkt en bevestigd.

Dit thema gebruikt het rotatie-effect om van de ene afbeelding over te gaan naar de volgende. Dit is een leuk effect vol beweging. Iedere afbeelding tolt uit het zicht, terwijl de volgende afbeelding al onmiddellijk naar het vak tolt.

Alle animatie-effecten – voor de iconen, de caption en hoofdafbeeldingen – gebruiken een gelijkaardige stijl, terwijl ze toch elk individueel zijn. Dit draagt opnieuw bij aan de leuke, moderne look van dit ontwerp.

De slider is responsief en past zich automatisch aan de grootte van het scherm van de gebruiker. Omdat de slider enkel gebruikt maakt van CSS3 (en dus geen afbeeldingen) kan hij snel geladen worden op mobiele apparaten zoals smartphones en tablets.

Door de heldere kleuren en de plezierige stijl is deze slider ideaal zijn voor websites die zich richten tot kinderen, of voor elke website die er helder en gestructureerd wil uitzien. Sommige restaurants, toeristenattracties en andere outdoor websites zouden ook hun voordeel kunnen halen uit het amusante openluchtgevoel dat bij dit thema past.