Animacije i transformacije HTML elemenata

undergraduate thesis

• Author: Ivan Kolar
• Mentor: Tajana Koren Ivančević (mentor)
• Committee member: Nikolina Stanić Loknar (član povjerenstva)
• Committee member: Tajana Koren Ivančević (član povjerenstva)
• Committee member: Tibor Skala (član povjerenstva)
• Granter: University of Zagreb; Faculty of Graphic Arts; Zagreb
• Defense date and country: 2016-7-5, Croatia
• Scientific / art field, discipline and subdiscipline: TECHNICAL SCIENCES; Graphic Technology

Abstract

Web stranice se uvelike oslanjaju na dinamične elemente koji se prikazuju na njima, pri čemu je potreba za animiranim sadržajem kao oblikom interaktivnog prikaza neophodna. Transformacije i animacije čine važan segment kvalitetnog grafičkog dizajna i čine web stranicu atraktivnijom zbog već same funkcionalnosti interaktivnog prikaza određenih elemenata. U radu se obrađuje animacija HTML elemenata kroz CSS. U statične web stranice se uvodi dinamika i pojam vremena. Prikazuju se načini definiranja tijeka animacije, ponavljanja i ključnih trenutaka (keyframes). Animacije se povezuju s drugim animacijama uz definiciju trenutka pokretanja svake animacije zasebno. Animacije se prilagođavaju za pravilan prikaz u svim poznatijim web preglednicima. Kroz animacije se prikazuju 2D i 3D transformacije HTML elemenata poput rotacije, skaliranja ili translacije elemenata te 'flip' efekti. Animira se promjena boje, oblika, pozicije, prozirnosti. Animiraju se i slovni znakovi, riječi ili cijeli tekst. Eksperimentalni dio rada prikazuje niz animacija različitih HTML elemenata, koji se pokreću u točno zadanim trenutcima.

Abstract (english)

Most of the websites rely on dynamic elements that are displayed in them. Animated content as a form of interactive display is very important. Transformations and animations are an important segment of quality graphic design and because of them websites are more attractive. The reason for that is functionality of interactive display of certain elements. This work talks about animation of HTML elements using CSS. Dynamics and concept of time are brought to the static websites. Modern website shows and defines the course of the animations, repetitions and keyframes. Animations are adjusted for proper display in all major web browsers. 2D and 3D transformations of HTML elements such as rotation, scale, translation elements and 'flip' effect are displayed trough animations. A change of color, shape, position and transparency can be animated as well as characters, words or even entire text. The experimental part of the work shows a series of animations of various HTML elements which moves in exactly wright moments.

• Keywords: HTML; CSS; animacija; transformacija; web
• Keywords (english): HTML; CSS; animation; transformation; web
• Language: croatian
• URN:NBN: urn:nbn:hr:216:187872
• Study programme: Title: Printing technology, course Technical - technological; Course: Graphic technology; 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: 2024-04-16 17:30:37