12 Herkulovih zadataka prikazanaih kroz efekte animacije i paralakse u sklopu web stranice

završni rad

• Autor: Jakov Marjanović
• Mentor: Tajana Koren Ivančević (mentor)
• Član povjerenstva: Maja Rudolf (predsjednik povjerenstva)
• Član povjerenstva: Tajana Koren Ivančević (član povjerenstva)
• Član povjerenstva: Nikolina Stanić Loknar (član povjerenstva)
• Ustanova koja je dodijelila akademski / stručni stupanj: Sveučilište u Zagrebu; Grafički fakultet; Zagreb
• Datum i država obrane: 2023-09-19, Hrvatska
• Znanstveno / umjetničko područje, polje i grana: TEHNIČKE ZNANOSTI; Grafička tehnologija

Sažetak

Rad se bavi pojmom animacije kao jednim od ključnih pojmova odgovornih za
interaktivno iskustvo na web stranici. U ovom kontekstu pod animaciju spada kretanje,
odnosno vizualno transformiranje elemenata prilikom listanja na web stranici.
Središte istraživanja se odnosi na paralaksu gdje se elementi pomiču proporcionalno
o broju piksela prijeđenih prilikom listanja i tako stvara dinamični prostor za korisnika.
Ovisno o brzini, smjeru i transformaciji pojedinog elementa stvara se dojam prostora.
Cilj ovog rada je prikazati učinak i potencijal tehnologija poput HTML, CSS i
JavaScripta, te istovremeno staviti naglasak na vizualne elemente koji su u ovom
slučaju stilizirane ilustracije. Praktični dio obuhvaća web stranicu sa navedenim
karakteristikama animacije. U radu se također obuhvaćaju procesi i objašnjava logika
koja prati zasebne linije i odjeljke koda. Velika pažnja se posvećuje JavaScriptu kao
odabranom jeziku pomoću kojeg su izvršene animacije.
Valja staviti naglasak važnost trendova koji se na digitalnim platformama ističu više
ili manje, ovisno o doživljaju korisnika. Paralaksa je relativno novi pojam koji se koristi
u području web dizajna i programiranja što stvara više prostora za daljnje istraživanje.

Sažetak (engleski)

The paper deals with the concept of animation as one of the key concepts responsible
for the interactive experience on the website. In this context, animation includes
movement, that is, the visual transformation of elements when scrolling through a web
page.
The focus of the research is on parallax, where elements move proportionally to the
number of pixels traversed when scrolling, thus creating a dynamic space for the user.
Depending on the speed, direction and transformation of an individual element, the
impression of space is created. The aim of this paper is to show the effect and potential
of technologies such as HTML, CSS and JavaScript, and at the same time to emphasize
visual elements, which in this case are stylized illustrations. The practical part includes
a web page with the specified animation characteristics. The paper also covers processes
and explains the logic behind individual lines and sections of code. A lot of attention is
paid to JavaScript as the chosen language with which the animations were made.
It is worth emphasizing the importance of trends that stand out more or less on
digital platforms, depending on the user's experience. Parallax is a relatively new term
used in the field of web design and programming which creates more room for further
research.

• Ključne riječi: paralaksa; animacija; web dizajn; korisničko iskustvo; web tehnologije
• Ključne riječi (engleski): parallax; animation; web design; user experience; web technologies
• Jezik: hrvatski
• URN:NBN: urn:nbn:hr:216:337330
• Studijski program: Naziv: Grafička tehnologija; smjerovi: Tehničko tehnološki, Dizajn grafičkih proizvoda; Smjer: Dizajn grafičkih proizvoda; Vrsta studija: sveučilišni; Stupanj studija: prijediplomski; Akademski / stručni naziv: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka grafičke tehnologije (univ. bacc. ing. techn. graph.)
• Vrsta resursa: Tekst
• Način izrade datoteke: Izvorno digitalna
• Prava pristupa: Zatvoreni pristup
• Datum i vrijeme pohrane: 2025-01-23 10:22:47