HTML5 i CSS3 banner2020-07-02T16:52:28+00:00

Project Description

Interaktivni HTML5 i CSS3 banner

Interaktivni HTML5 i CSS3 banner - Primjer dizajna HTML5 bannera

HTML5 banneri najčešće su izrađeni uz pomoć JavaScript-a da bi se na njima prikazivalo više sadržaja u slajderu kao što je to slučaj u ovom banneru. No, ovaj banner nema ni jednu liniju JavaScript koda, a sadržaj je ipak smješten u slajderu što smo uspješno napravili uz CSS3 (Cascade Style Sheet).

Inače, banneri koji u sebi imaju JavaScript kod, mogu biti mnogo teži od ovoga. Ovaj banner je težak ukupno 54 kb što znači da se brzo učitava i ne bi trebao usporavati rad web stranice na kojoj će biti smješten. Za razliku od običnih slikovnih bannera, odnosno reklama koje možemo vidjeti na mnogim portalima, ovaj banner omogućuje da korisnicima prikažete više sadržaja i tako ih uspješno potaknete da posjete vašu stranicu klikom na banner.

HTML5 i CSS3 banneri

HTML5 banneri imaju neka ograničenja. Ne mogu imati baš sve moguće animacije koje nam može pružiti JavaScript, ali zato imaju nekoliko svojih prednosti. U ovom primjeru imamo CSS3 slajder koji na mobitelu funkcionira na dodir, a na računalu slajdove možemo listati povlačenjem narančastog gumba. Moguće je i drugačije urediti ovaj slajder, npr. “sidrima” (anchore link) možemo postaviti gumbe koji će onda na odabir prikazati određeni slajd.

CSS3 omogućuje da u HTML5 banneru dodamo i druge animacije na gumbima, slikama, tekstu itd., isto kao i na web stranici.