Animacija spletnih grafik z uporabo CSS

Ornik, Maša (avtor), Gabrijelčič Tomc, Helena (mentor)

Z animiranimi grafičnimi elementi na spletnih straneh se srečujemo vsak dan. Razvijalci in oblikovalci spletnih strani zaradi želje po izstopanju v množici novo nastajajočih spletnih strani opuščajo statične in monotone rešitve pri ustvarjanju novih spletnih mest. Diplomska naloga se ukvarja s pripravo in izdelavo grafičnih elementov, primernih za manipulacijo in gibanje na spletnih straneh s pomočjo CSS-kaskadnih stilskih predlog (angl. Cascading Style Sheets). V teoretičnem delu naloge sta opisana spletna animacija ter njen razvoj, različni načini, s katerimi jo lahko izvajamo, in kakšne so razlike med CSS in ostalimi oblikami, orodji in viri, ki so nam na voljo. V sklopu teorije je delo podrobneje osredotočeno na verzijo CSS 3 in lastnosti, ki jih ponuja. Relevantni in pojasnjeni pojmi so bili CSS-animacije, CSS-tranzicije ter pravilo glavne slike, čemur je bilo med raziskovanjem posvečeno največ pozornosti. Zadnji segment teoretičnega dela je namenjen podpori tovrstnega načina animiranja v brskalnikih. Eksperimentalni del je razdeljen na dve večji fazi izdelave, in sicer načrtovanje ter izdelavo animacij. V prvi fazi je bil zasnovan koncept animacij ter njihovih osrednjih elementov. Sledilo je oblikovanje grafik in priprava le-teh za uporabo v animacijah. Grafični elementi so bili izdelani v programu za vektorsko risanje grafik. Vsak izdelan osrednji element predstavlja določeno prevozno sredstvo, in sicer avtomobil, balon, podmornico in vesoljsko ladjo, ustrezno pripravljenega za animiranje. V drugi fazi so bile nastale grafike animirane s pomočjo CSS in spisani ukazi na podlagi želenega gibanja na strani. Koda je bila nato optimirana za delovanje v brskalnikih. V zadnjem delu eksperimentalnega dela je bilo izvedeno testiranje animacij v dveh različnih brskalnikih. V rezultatih poteka razprava o uspešnosti eksperimenta, doseženih ciljih ter težavnosti in časovni zahtevnosti. Težavnost in časovna zahtevnost sta bili odvisni od števila elementov in kompleksnosti njihovega gibanja. Dosežen cilj naloge so štiri uspešno izdelane animacije za splet in nadgradnja znanja na področju CSS. Na podlagi diplomske naloge so v zaključku podana glavna dognanja o uporabnosti CSS kot pripomočka za spletno animacijo.

• Jezik: Slovenski jezik
• Ključne besede: spletna animacija, CSS, interaktivnost, spletne grafike, spletno oblikovanje
• Vrsta gradiva: Diplomsko delo/naloga
• Organizacija: NTF - Naravoslovnotehniška fakulteta
• Leto izida: 2022
• PID: 20.500.12556/RUL-139662
• Datum objave v RUL: 06.09.2022

Sekundarni jezik

• Jezik: Angleški jezik
• Naslov: Animation of web graphics using CSS

Izvleček

We encounter animated graphic elements on websites every day. Web developers and designers abandon static and monotonous solutions when creating new websites due to the desire to stand out in the multitude of newly emerging websites. Our diploma thesis deals with preparing and making graphic elements suitable for manipulation and movement on web pages with the help of CSS (Cascading Style Sheets). The theoretical part of the thesis describes web animation and its development, the existing methods in which it can be performed and the differences between CSS and other forms, tools and resources available to us. It also focuses more on the CSS 3 version and its features. Relevant and explained concepts were CSS-animations, CSS transitions and the keyframe rule. The last segment of theoretical work is dedicated to browser support. The experimental work is divided into two parts i.e. planning and making animations. The first part contains the design of the concept for animations and their elements. This was followed by creating graphics and their export into a form ready for animation use. Graphic elements were created in a vector design program. Each graphic represents a particular vehicle suitably prepared for animation use: a car, a balloon, a submarine and a spaceship. During the second part, the graphics were animated with the help of CSS and code commands were written based on the desired movement. Then the written code was optimized for browser support. The last part of the experimental work tests the animations in two different browsers. In the results, the success of the experiment, the difficulty and the time consumption of the process were determined, as also whether or not our initial goal was achieved. The difficulty and time consumption of the experiment depended on the number of graphic elements and the complexity of the desired movement. In the conclusion of the diploma thesis, the main viewpoints were formed regarding the usefulness, functionality and practicality of CSS as a tool for web animation.

• Ključne besede: web animation, CSS, interactivity, web graphics, web design