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

undergraduate thesis

• Author: Jakov Marjanović
• Mentor: Tajana Koren Ivančević (mentor)
• Committee member: Maja Rudolf (predsjednik povjerenstva)
• Committee member: Tajana Koren Ivančević (član povjerenstva)
• Committee member: Nikolina Stanić Loknar (član povjerenstva)
• Granter: University of Zagreb; Faculty of Graphic Arts; Zagreb
• Defense date and country: 2023-09-19, Croatia
• Scientific / art field, discipline and subdiscipline: TECHNICAL SCIENCES; Graphic Technology

Abstract

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.

Abstract (english)

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.

• Keywords: paralaksa; animacija; web dizajn; korisničko iskustvo; web tehnologije
• Keywords (english): parallax; animation; web design; user experience; web technologies
• Language: croatian
• URN:NBN: urn:nbn:hr:216:337330
• Study programme: Title: Graphic technology; specializations in: Technical – technological, Design of graphic products; Course: Design of graphic products; Study programme type: university; Study level: undergraduate; Academic / professional title: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka grafičke tehnologije (sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka grafičke tehnologije)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Closed access
• Created on: 2025-01-23 10:22:47