PROJECTS
Transition states
TRANSITION STATES
powered by the rellax.js library. This entails
linking to a library and just a few lines of code that
enable the content to slide individually into place.
To get started, grab the project folder and ensure
the ‘start’ folder is open in your code editor. The
example content to add will go into the HTML, so
open the ‘index.html’ for editing and if you scroll to
the body you’ll find some code already there. This
is mainly the fixed branding and navigation, then
the second area of content to save having to put
repetitive content in there. Inside the comment
sections denoting the start and end of the first
section, add the content.<header id=”rockies”>
<div class=”absolute”>
<div class=”bg rellax” data-rellax-speed=”-12”>CREATE ANIMATED
TRANSITION STATES
Pdun#Vkxl·herwwrp explores how to make your designs transition
between screens to create eye-catching user experiences
If you follow any web design trends, you will
undoubtedly have noticed a lot of content that
animates between screens. This trend emerged, but
moved beyond, the ‘one-page’ site and is
particularly good for ‘sections’ of content. The
biggest challenge for the designer with this kind of
site isn’t creating the animated content – that is
actually easy to do – but rather, thinking in terms
of screens. The problem here is that not all screens
are the same ratio and that causes a lot of issues
for the content. As such rather than this be purely
responsive, the design is going to have to work in
breakpoints; larger screens will be landscape and
once down to less than 768 pixels, the design has
to become portrait.
This tutorial will focus on setting up some parts
of the HTML content and CSS with the transitionsView source
files here!
All the files you need for
this tutorial can be found at
https://netm.ag/37yYpYJABOUT THE AUTHOR
MARK
SHUFFLEBOTTOM
w: webspaceinvader.com
t: @webspaceinvader
job: Professor interaction
design, Sheridan College
areas of expertise:
HTML, CSS, JavaScript