PROJECTS
Transition states
EVEN MORE OPTIONS
RESOURCESMost of the animation that takes place in this tutorial is
linked to the scrolling and movement through the page.
Moving elements like this is known as parallax scrolling because
the elements move at different speeds, giving the illusion of depth.
The effect comes from games and cartoons and is a simple way to
get attention as each element has its own speed. Initial
implementations of this on the web required some heavy lifting
from the browsers but this is much better now. Another option to
consider when trying to create a unique user experience is moving
the content in different directions – rather than just have it move
up and down at different speeds, the content could move sideways
at different speeds.
A great library that offers these kinds of results is the
simpleParallax.js library (https://simpleparallax.com). This allows
for movement in a number of directions, enabling overflow to be
visible or clipped and with a delay to the transition. Moving content
in unexpected ways is a sure-fire way to get the users’ attention:
take a look at Limely, a digital agency site (www.limely.co.uk) to see
a great example of unexpected movement. Two sides of a canyon
open up as the user scrolls, leaving the content inside to move up
at different speeds. With the combination of movement it is a very
effective way of providing delight to your user.The simpleParallax.js library enables content to move in different directions based
on the scroll position of the browserThe Limely website is a good example of moving elements in different directions to
transition between statesheight: 200vh !important;
overflow-y: hidden;
}
header {
height: 100vh;
overflow: hidden;
position: relative;
z-index: 200;
}The wrapper handles enough content for two
screens, which means that its length is exactly
twice the height of the screen. This calculation is
used because when content is added to move at
different speeds, it will cause some overflow. The
header is the first section so that gets just one
screen of height..bg {
height: 100vh;
background: url(../img/sky.jpg) no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
}
.absolute {
position: absolute;
width: 100%;
height: auto;
}The background is given a sky image that will
cover the background and then the class ‘absolute’
is created. This is used by most divs in order to get
them in the correct position on top of each other..md {
height: 65vh;
bottom: 15vw;
}
.md img {
max-height: 630px;
}“The wrapper handles
enough content for
two screens, which
means that its length
is exactly twice the
height of the screen”