Navigation
© wdesigner.ro · UI/UX & Web Designer
Privacy Policy · Winning by design
Case study · Web animation
CSS3 City Animations
Animated headers for the Golden Pages portals of FCR Media: city skylines drawn in Illustrator and Photoshop and brought to life in CSS3 and HTML5, for Romania, Vienna, Latvia and Uruguay.
A skyline that changes with the time of day and the season, drawn in vector and animated in pure CSS.
Overview
Iconic buildings, animated in CSS
During my collaboration with FCR Media I designed and animated the headers of the Golden Pages portals in several countries. Each skyline is built from the city’s most iconic buildings: in Romania the Intercontinental Hotel, the Romanian Opera, Bran Castle and the Arch of Triumph. The scene changes with the time of day and the month: day, night and winter.
Client
FCR Media, the Golden Pages (Pagini Aurii) portals
- 9 Animated scenes
- 4 Countries
- 3 Moods: day, night, winter
The approach
How the cities move
01
Pure CSS3 motion
Cars, people, clouds and the sun move with CSS keyframes, not video or GIFs.
02
Day, night and winter
The same skyline changes its light, windows and weather with the time of day and the month.
03
Iconic landmarks
Every city is drawn from its best-known buildings, so each portal feels local at a glance.
04
Vector illustration
Scenes drawn in Illustrator and finished in Photoshop, then cut into animation layers.
05
Layered scenes
Sky, city, street and traffic are separate layers, each moving at its own speed for depth.
06
Made for headers
Built as portal headers: a wide, short stage that sits on top of every page.
The animations
Nine scenes, four countries
Romania · Bucharest Day · Night · Winter
Austria · Vienna Day · Night
Latvia · Riga Day · Night
Uruguay · Montevideo Day · Night
Design system
Bright days, golden nights
- Sky blue #09B4E0
- Midnight #000032
- Window gold #D8CD40
- Night street #4F392E
- Winter snow #EFEFEF
{ }
CSS3 + HTML5
@keyframes drive { to { transform: translateX(100vw); } }
Romania · Winter
Each header plays in the browser, so it stays sharp at any width and loads in a fraction of a video.
Let’s Talk!
Let’s make your business stand out.
Your idea, my design, we can not fail in our future collaboration.