<a href="https://youtu.be/kd_zuEYCDck" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<input type="radio" name="scene" id="scene-1" value="1" checked />
<input type="radio" name="scene" id="scene-2" value="2" />
<input type="radio" name="scene" id="scene-3" value="3" />
<input type="radio" name="scene" id="scene-4" value="4" />
<main id="site">
<header class="top-nav">
@keyframers
</header>
<div class="ocean">
<div class="ocean-text">Stop</div>
</div>
<div class="left-side">
<div class="page-numbers" data-total="04">
<div class="page-number -tens">0</div>
<div class="page-number -ones">
1<br/>2<br/>3<br/>4
</div>
</div>
</div>
<div class="hero">
<div class="layer" data-scene="1">
<h1 class="heading">
We can help<br />
to save<br />
the oceans
</h1>
<button class="button">
How can I help?
</button>
</div>
<div class="layer" data-scene="2">
<h1 class="heading">
Saving nature,<br />
we save our<br />
future
</h1>
<button class="button">
How can I help?
</button>
</div>
<div class="layer" data-scene="3">
<h1 class="heading">
Only you<br />
can prevent<br />
ocean fires
</h1>
<button class="button">
How can I help?
</button>
</div>
<div class="layer" data-scene="4">
<h1 class="heading">
Do not<br />
litter on<br />
the beach
</h1>
<button class="button">
How can I help?
</button>
</div>
</div>
<div class="left-content">
<div class="layer" data-scene="1">
<div class="fact subtitle">More than</div>
<div class="fact number">1 000 000</div>
<div class="fact description">seabirds die yearly due to plastic debris</div>
</div>
<div class="layer" data-scene="2">
<div class="fact subtitle">The largest garbage patch is</div>
<div class="fact number">1 760 000 m<sup>2</sup></div>
<div class="fact description">and is 10m deep</div>
</div>
<div class="layer" data-scene="3">
<div class="fact subtitle">More than</div>
<div class="fact number">700 000</div>
<div class="fact description">species call the ocean their home</div>
</div>
<div class="layer" data-scene="4">
<div class="fact subtitle">There is an estimated</div>
<div class="fact number">12 000 000</div>
<div class="fact description">metric tons of plastic in the ocean</div>
</div>
</div>
<div class="right-content">
<nav class="slide-nav">
<div class="nav-button -prev">
<
<label class="nav-toggle" for="scene-1">1</label>
<label class="nav-toggle" for="scene-2">2</label>
<label class="nav-toggle" for="scene-3">3</label>
<label class="nav-toggle" for="scene-4">4</label>
</div>
<div class="nav-button -next">
Next >
<label class="nav-toggle" for="scene-1">1</label>
<label class="nav-toggle" for="scene-2">2</label>
<label class="nav-toggle" for="scene-3">3</label>
<label class="nav-toggle" for="scene-4">4</label>
</div>
</nav>
<div class="layer" data-scene="1">
<h2 class="heading">
It's not late. It's time to save the ocean.
</h2>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusantium est autem amet minus, atque consequatur iure dolor id inventore sit magnam sint, voluptates deserunt beatae? Error eveniet quam dicta!
</p>
</div>
<div class="layer" data-scene="2">
<h2 class="heading">
Facts and Stats on Ocean Pollution
</h2>
<p class="paragraph">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, amet hic provident ipsa placeat ad. Excepturi distinctio consectetur voluptatibus rem deleniti ducimus officia natus, magnam aut architecto sint reprehenderit provident?
</p>
</div>
<div class="layer" data-scene="3">
<h2 class="heading">
Learn more about how you can help.
</h2>
<p class="paragraph">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, amet hic provident ipsa placeat ad. Excepturi distinctio consectetur voluptatibus rem deleniti ducimus officia natus, magnam aut architecto sint reprehenderit provident?
</p>
</div>
<div class="layer" data-scene="4">
<h2 class="heading">
Join the fight to defend our oceans.
</h2>
<p class="paragraph">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi temporibus explicabo aspernatur dignissimos veritatis. Voluptate quis quia sed totam quasi placeat, odio quam fuga consectetur voluptatibus praesentium tempore vel molestiae?
</p>
</div>
</div>
</main>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
@import url('https://fonts.googleapis.com/css?family=Oswald:500');
$color-teal: #0D3D4D;
::selection {
background-color: #2256A1;
color: white;
}
#site {
display: grid;
grid-template-rows: 3fr 2fr;
grid-template-columns: 4rem 1fr 1fr 5rem;
width: 90vw;
height: 90vh;
box-shadow: 0 .5rem 2rem rgba(black, 0.1);
background-color: #fff;
color: #000;
font-family: 'Raleway', sans-serif;
overflow: hidden;
* {
transition: all .6s cubic-bezier(.2, 0, .2, 1);
}
}
#site {
--total: 4;
--scene: 1;
--percentage: calc(var(--scene) / var(--total));
}
input[name="scene"] {
position: absolute;
top: 0;
left: -100%;
visibility: hidden;
z-index: 5;
}
input[value="1"]:checked ~ #site { --scene: 1; }
input[value="2"]:checked ~ #site { --scene: 2; }
input[value="3"]:checked ~ #site { --scene: 3; }
input[value="4"]:checked ~ #site { --scene: 4; }
input[value="1"]:checked ~ * [data-scene]:not([data-scene="1"]),
input[value="2"]:checked ~ * [data-scene]:not([data-scene="2"]),
input[value="3"]:checked ~ * [data-scene]:not([data-scene="3"]),
input[value="4"]:checked ~ * [data-scene]:not([data-scene="4"]) {
pointer-events: none;
.heading, .paragraph, .fact {
transform: translateX(-25%);
opacity: 0;
}
}
input[value="1"]:checked ~ * [data-scene="1"],
input[value="2"]:checked ~ * [data-scene="2"],
input[value="3"]:checked ~ * [data-scene="3"],
input[value="4"]:checked ~ * [data-scene="4"] {
+ [data-scene] {
.heading, .paragraph, .fact {
transform: translateX(25%);
}
}
}
.ocean {
grid-row: 1 / 2;
grid-column: 1 / -1;
background-color: blue;
background-image: url(https://picsum.photos/1200/800?image=912);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.ocean-text {
display: inline-block;
white-space: nowrap;
font-size: 45vh;
text-transform: uppercase;
font-weight: bold;
font-family: 'Raleway', sans-serif;
position: relative;
background-image: url(https://picsum.photos/1200/800?image=909);
background-size: 160% auto;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-position: calc( 25% + (-50% * var(--percentage)) ) 0;
transform:
translateX( calc( 50% + ( -100% * var(--percentage) ) ) );
}
.left-content {
float: left;
grid-row: 2 / 4;
grid-column: 2 / 3;
.layer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
> .subtitle {
font-weight: bold;
color: $color-teal;
}
> .subtitle, > .description {
font-size: .75rem;
}
> .subtitle, > .number {
color: $color-teal;
}
> .number {
font-size: 2rem;
font-weight: bold;
letter-spacing: -1px;
}
}
}
.right-content {
grid-row: 2 / 4;
grid-column: 3 / -1;
> .layer {
padding: 3rem 1rem;
display: flex;
flex-direction: column;
justify-content: center;
> .heading {
margin: 0;
font-size: 1rem;
color: $color-teal;
}
}
}
/* ---------------------------------- */
.slide-nav {
position: absolute;
bottom: 100%;
right: 0;
display: flex;
}
.nav-button {
display: inline-block;
padding: 0.5em 1em;
background: #F9FBFB;
cursor: pointer;
user-select: none;
font-weight: bold;
text-transform: uppercase;
overflow: hidden;
color: #8CAAB7;
&.-next {
color: #2D4451;
background: #CEDBE5; }
.nav-toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
transform: translateX(0);
transition: transform 0.5s linear 0s;
z-index: 1;
}
}
input[value="1"]:checked ~ * .-next .nav-toggle:not([for="scene-2"]),
input[value="2"]:checked ~ * .-next .nav-toggle:not([for="scene-3"]),
input[value="3"]:checked ~ * .-next .nav-toggle:not([for="scene-4"]),
input[value="4"]:checked ~ * .-next .nav-toggle:not([for="scene-1"]),
input[value="1"]:checked ~ * .-prev .nav-toggle:not([for="scene-4"]),
input[value="2"]:checked ~ * .-prev .nav-toggle:not([for="scene-1"]),
input[value="3"]:checked ~ * .-prev .nav-toggle:not([for="scene-2"]),
input[value="4"]:checked ~ * .-prev .nav-toggle:not([for="scene-3"]) {
transform: translateX(100%);
z-index: 3;
transition-delay: .5s !important;
}
.top-nav {
grid-column: 2 / 3;
grid-row: 1 / 2;
margin-top: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
color: #FFF;
font-weight: bold;
text-shadow: 0 1px 1em rgba(0,0,0,0.4);
}
/* ---------------------------------- */
.left-side {
grid-row: 1 / 2;
grid-column: 2 / 3;
// align-self: end;
font-size: 4rem;
font-family: 'Oswald', sans-serif;
font-weight: 500;
overflow: hidden;
}
.page-numbers {
position: absolute;
bottom: 0;
left: 0;
height: 1em;
width: 100%;
display: flex;
align-items: flex-end;
overflow: hidden;
color: #FFF;
transform: translateY(.5rem);
&:after {
content: '/ ' attr(data-total);
font-size: 1rem;
position: absolute;
top: 0;
left: 4.2rem;
opacity: 0.7;
}
}
.page-number {
display: inline-block;
&.-ones {
transform: translateY(
calc((var(--total) - var(--scene))
* (100% / var(--total)))
);
}
}
.hero {
grid-row: 1 / 2;
grid-column: 3 / -1;
color: #FFF;
> .layer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.heading {
text-transform: uppercase;
letter-spacing: 2px;
}
.button {
appearance: none;
border: none;
padding: 1rem;
background-color: $color-teal;
color: white;
font-size: .6rem;
font-family: inherit;
}
}
.layer {
position: absolute;
top: 0;
left: 0;
// this...
bottom: 0;
right: 0;
// or this... (preferred)
width: 100%;
height: 100%;
margin: auto;
}
// -------------------------------
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
View Compiled
// 🌊
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.