net - UK (2020-05)

Transition states

Top As the screen transitions

between states, the different

layers move into place and move

out to give the illusion of the

scene building

Middle As the second scene

comes into view it’s the

typography that helps drive the

scene into the right place and

make this successful as a design

Bottom The design is set

to work across a number

of breakpoints for the user,

including iPad portrait and

landscape views

.cov {
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
object-fit: cover;
}

The mid content and front content have a similar
setup, just with different positions. Here we
have the mid layer CSS. This sets the relevant
positioning to put the mountains in the correct
spot. The ‘cover’ class is applied to any image and
it ensures that each image covers the div to enable
scaling of that image proportionally.

.coverText {
position: absolute;
width: 100%;
height: auto;
bottom: 21vw;
}

The cover text class is going to hold the text,
which ensures the position of it is put at the
correct height from the bottom of the screen so the
headline fits into the design. The browser width
dictates the scaling of the image, so the text is
positioned with ‘vw’ as well.

h2 {
padding: 0 0 0 8vw;
font-size: 12vw;
color: #fff;
}
.content {
position: relative;
color: #fff;
height: 100vh;
z-index: 100;
}

The final CSS to focus on deals with the formatting
of the heading. The ‘content’ holds the second
screen, so it is given a full page height. It is also
given a slightly higher z-index to ensure it covers
any gaps in movement from one section to another.
Taking a look at the remaining CSS code reveals
the changes that are made to enable this to work
on a number of different popular screens, but this
can be further added to as needed.
Be sure to look at the final design in your
browser to see the transitions smoothly move into
place between screen sections.