Create an animated interface
Eddie Gachegua and Neil Muralee explain how to create a dynamic web frontpage, using only some simple code.
Ever wondered how to create a smoothly animated interface for your website, without using Flash?
Based on a grid of images that expand smoothly when you drag your mouse over them, this project feels like Flash, but is all done with JavaScript and CSS. Television production company Lion and digital agency Numiko used this technique to build their Britain From Above site for the BBC, and the site went on to scoop an Interactive Emmy.
As a visual interface it's extremely versatile, and would make an excellent portfolio site for a photographer or illustrator, for instance. In this project we design the image grid in Photoshop, then explain the code to get it working.
Click here to download the support files (10.3MB)
Click here to download the tutorial for free
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.
Related articles
- Alien: Rogue Incursion's terrifying Xenomorphs are a “happy accident” reveals the game's art director
- The best 3ds Max Plugins: supercharge your modelling, lighting, and rendering
- People are still amazed that Toy Story 4's cobwebs were made by AI spiders
- Warhammer 40,000 Space Marine 2 almost had 100K enemies on screen