Az “Akciós furgon bérlés” banner elkészítése

2014. 10 02. - csütörtök | Hollósi SándorHollósi Sándor

furgon-banner

A minap megbízást kaptunk a bérbe.hu-tól egy látványos mozgó hirdetés készítésére. Manapság egy bannernek is univerzálisnak kell lennie, a cél az, hogy minden mobil eszközön dekoratívan és gyorsan jelenjen meg. Ilyen szempontból technikailag a flash és a gif kapásból kilőve. A mozgás szimulálására marad a javascript és a css3 technika. A css3 mellett döntöttünk, ma már az összes modern böngésző a transition-ök nagy részét tökéletesen kezeli, és ellentétben a javascripttel – nem lehet kikapcsolni.

A megrendelő elképzelése az volt, hogy egy furgon mozogjon, haladjon végig a felületen, és valahol legyen kiírva az “Akciós furgon bérlés Budapest” felirat.

Első körben vadásztunk egy képet egy útról oldalnézetből:

15277752-american-country-road-side-view

Ennek a képnek nagyjából a középső egy harmadára volt csak szükségünk, amit vízszintes irányban tükröztünk, majd a tükrözés után még egyszer beillesztettük. Így X irányban másfélszeres méretű képünk lett. Ezen tovább dolgoztunk még grafikai effektekkel, hogy a tükrözés minél kevésbé látszódjon, és egy kis gaussian blur-t is használtunk a térérzet növeléséhez.

fullroad

Ugyanebből a képből kivágtuk az előteret, és motion blur alkalmazásával azt az érzést keljük, mintha már most mozogna az út. Az így elkészült képet átlátszó png file-ba mentettük.

road

Majd a furgon oldalnézeti képét szedtük szét.

fiat-ducato-11

Rákerültek a feliratok, és lekerültek a kerekek 🙂

ducato

Próbálkoztunk a kerék közvetlen forgatásával is, de azzal egy mai átlagos videokártya még nehezen birkózna meg, így ezekre radial blur került.

kerek

A mozgási fázisok kivétel nélkül css3-ban készültek, hamarosan ezt a kódot is megmutatjuk.

A végeredmény pedig ilyen lett:


Like-old oldalunkat, hogy bepillantást nyerhess a weboldalak készítésének folyamatába!