Web_Designer_Issue_262_2017

web workshop
Animate multiple
elements simultaneously
As seen on tram-house.com
Side scrolling
The site’s home page is side
scrolling with the user still scrolling
downwards to move the content
on. Page elements animate onto
the screen from the sides as the
user moves through.
Home link
As with any project, using
the logo takes the user
back to the home page. As
other content loads it will
cover the existing design,
so it’s important to ensure
users can get back to the
main content.
Site music player
The old record player icon
controls the music
playing on the site, and it
simply allows for it to be
turned on and of.
Interactive exploration
Users have to interact with
content to explore further, in
this case dragging the key into
the lock to load more content
onto the page.
Loading animation
As the user puts the key in the lock,
concentric circles animate
outwards in bands of strong colour,
taking over the screen until it loads
the new content.
52