<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="wrap-3d">
<div class="item-3d">
<span class="ground"></span>
<figure class="item-content group">
<div class="item-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/aw-white.png" alt="" />
</div>
<figcaption class="item-caption">
<p>
<strong>38mm and 42mm Case</strong><br>
7000 Series Silver Aluminum<br>
Ion-X Glass<br>
Retina Display<br>
Composite Back
</p>
<p>
<strong>Sport Band</strong><br>
White Fluoroelastomer<br>
Stainless Steel Pin
</p>
<p>
<a href="#">View 38mm in the store</a><br>
<a href="#">View 42mm in the store</a>
</p>
</figcaption>
</figure>
</div>
<div class="item-3d">
<span class="ground"></span>
<figure class="item-content group">
<div class="item-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/aw-blue.png" alt="" />
</div>
<figcaption class="item-caption">
<p>
<strong>38mm and 42mm Case</strong><br>
7000 Series Silver Aluminum<br>
Ion-X Glass<br>
Retina Display<br>
Composite Back
</p>
<p>
<strong>Sport Band</strong><br>
Blue Fluoroelastomer<br>
Stainless Steel Pin
</p>
<p>
<a href="#">View 38mm in the store</a><br>
<a href="#">View 42mm in the store</a>
</p>
</figcaption>
</figure>
</div>
<div class="item-3d">
<span class="ground"></span>
<figure class="item-content group">
<div class="item-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/aw-green.png" alt="" />
</div>
<figcaption class="item-caption">
<p>
<strong>38mm and 42mm Case</strong><br>
7000 Series Silver Aluminum<br>
Ion-X Glass<br>
Retina Display<br>
Composite Back
</p>
<p>
<strong>Sport Band</strong><br>
Green Fluoroelastomer<br>
Stainless Steel Pin
</p>
<p>
<a href="#">View 38mm in the store</a><br>
<a href="#">View 42mm in the store</a>
</p>
</figcaption>
</figure>
</div>
<div class="item-3d">
<span class="ground"></span>
<figure class="item-content group">
<div class="item-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/aw-red.png" alt="" />
</div>
<figcaption class="item-caption">
<p>
<strong>38mm and 42mm Case</strong><br>
7000 Series Silver Aluminum<br>
Ion-X Glass<br>
Retina Display<br>
Composite Back
</p>
<p>
<strong>Sport Band</strong><br>
Pink Fluoroelastomer<br>
Stainless Steel Pin
</p>
<p>
<a href="#">View 38mm in the store</a><br>
<a href="#">View 42mm in the store</a>
</p>
</figcaption>
</figure>
</div>
<div class="item-3d">
<span class="ground"></span>
<figure class="item-content group">
<div class="item-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/aw-black.png" alt="" />
</div>
<figcaption class="item-caption">
<p>
<strong>38mm and 42mm Case</strong><br>
7000 Series Silver Aluminum<br>
Ion-X Glass<br>
Retina Display<br>
Composite Back
</p>
<p>
<strong>Sport Band</strong><br>
Black Fluoroelastomer<br>
Stainless Steel Pin
</p>
<p>
<a href="#">View 38mm in the store</a><br>
<a href="#">View 42mm in the store</a>
</p>
</figcaption>
</figure>
</div>
<footer class="footer">
<p>A concept for perspective scrolling in CSS by <a href="https://codepen.io/Hornebom/" target="_blank">Hornebom</a></p>
<p>You can dig the source code <a href="https://codepen.io/Hornebom/pen/zGKVva">here</a></p>
</footer>
</section>
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.group:after {
content: "";
display: table;
clear: both;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-family: "Myriad Pro", sans-serif;
font-size: 100%;
line-height: 1.5;
color: #787878;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 600px) {
body {
font-size: 70%;
}
}
a {
text-decoration: none;
color: #08c;
}
strong {
font-weight: normal;
color: #303030;
}
.wrap-3d {
width: 100%;
height: 100%;
max-height: 100%;
padding-top: 5%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: #f0f0f0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 150rem;
perspective: 150rem;
-webkit-perspective-origin: 50% 110%;
perspective-origin: 50% 110%;
}
.item-3d {
width: 100%;
margin-bottom: 20%;
padding-top: 10%;
padding-bottom: 5%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
@media (max-width: 600px) {
.item-3d {
margin-bottom: 40%;
}
}
.ground {
position: absolute;
top: 0;
right: -50%;
bottom: 0;
left: -50%;
width: 200%;
margin: 0 auto;
background-image: -webkit-linear-gradient(#d8d8d8, #f2f2f2 60%);
background-image: linear-gradient(#d8d8d8, #f2f2f2 60%);
background-size: 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ground:before, .ground:after {
content: '';
position: absolute;
width: 100%;
}
.ground:before {
top: 0;
left: 50%;
height: 100%;
width: 50%;
max-width: 50rem;
background-image: -webkit-radial-gradient(#cccccc, rgba(204, 204, 204, 0) 60%);
background-image: radial-gradient(#cccccc, rgba(204, 204, 204, 0) 60%);
background-size: 50% 80%;
background-repeat: no-repeat;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ground:after {
bottom: -500px;
left: 0;
height: 500px;
background-image: -webkit-linear-gradient(#d8d8d8, #f2f2f2);
background-image: linear-gradient(#d8d8d8, #f2f2f2);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
}
.item-3d:nth-child(even) .ground:before {
background-position: 100% 50%;
-webkit-animation: floating-shadow-r 5s -1s infinite;
animation: floating-shadow-r 5s -1s infinite;
}
.item-3d:nth-child(odd) .ground:before {
background-position: 0 50%;
-webkit-animation: floating-shadow-l 5s -1s infinite;
animation: floating-shadow-l 5s -1s infinite;
}
@-webkit-keyframes floating-shadow-l {
0%, 100% {
background-size: 35% 80%;
background-position: 10% 80%;
}
50% {
background-size: 50% 80%;
background-position: 0 80%;
}
}
@keyframes floating-shadow-l {
0%, 100% {
background-size: 35% 80%;
background-position: 10% 80%;
}
50% {
background-size: 50% 80%;
background-position: 0 80%;
}
}
@-webkit-keyframes floating-shadow-r {
0%, 100% {
background-size: 35% 80%;
background-position: 90% 80%;
}
50% {
background-size: 50% 80%;
background-position: 100% 80%;
}
}
@keyframes floating-shadow-r {
0%, 100% {
background-size: 35% 80%;
background-position: 90% 80%;
}
50% {
background-size: 50% 80%;
background-position: 100% 80%;
}
}
.item-content {
position: relative;
width: 100%;
max-width: 50rem;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.item-img {
position: relative;
float: left;
display: block;
width: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: floating 5s -1s infinite;
animation: floating 5s -1s infinite;
}
.item-img img {
display: block;
width: 100%;
height: auto;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: translateZ(-5rem);
transform: translateZ(-5rem);
}
.item-3d:nth-child(even) .item-img {
float: right;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@-webkit-keyframes floating {
0%, 100% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes floating {
0%, 100% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.item-caption {
display: block;
position: relative;
float: left;
width: 50%;
}
.item-3d:nth-child(odd) .item-caption {
padding-left: 10%;
}
@media (max-width: 600px) {
.item-3d:nth-child(odd) .item-caption {
padding-left: 5%;
}
}
.item-3d:nth-child(even) .item-caption {
text-align: right;
padding-right: 10%;
}
@media (max-width: 600px) {
.item-3d:nth-child(even) .item-caption {
padding-right: 5%;
}
}
.item-caption p {
font-size: 87.5%;
line-height: 1.333;
margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
.item-caption p {
margin-bottom: 0.5rem;
}
}
.item-caption p a {
position: relative;
display: inline-block;
margin-bottom: 0.3rem;
}
.item-caption p a:before {
content: '';
position: absolute;
right: 1rem;
bottom: 3px;
left: 0;
height: 1px;
background-color: #08c;
opacity: 0;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.item-caption p a:after {
content: '\003E';
padding-left: 0.5rem;
text-decoration: none;
}
.item-caption p a:hover:before, .item-caption p a:active:before, .item-caption p a:focus:before {
opacity: 0.5;
}
.intro {
position: relative;
width: 100%;
max-width: 50rem;
margin: 0 auto;
padding: 15% 2rem;
text-align: center;
}
.intro:after {
content: '\2193';
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
font-size: 150%;
-webkit-animation: scroll-arrw 1s -1s infinite linear;
animation: scroll-arrw 1s -1s infinite linear;
}
@-webkit-keyframes scroll-arrw {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
50% {
-webkit-transform: translateY(80%);
transform: translateY(80%);
opacity: 1;
}
100% {
-webkit-transform: translateY(160%);
transform: translateY(160%);
opacity: 0;
}
}
@keyframes scroll-arrw {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
50% {
-webkit-transform: translateY(80%);
transform: translateY(80%);
opacity: 1;
}
100% {
-webkit-transform: translateY(160%);
transform: translateY(160%);
opacity: 0;
}
}
.intro h1 {
font-size: 250%;
font-weight: normal;
color: #303030;
}
.intro p {
margin-bottom: 2rem;
font-size: 175%;
line-height: 1.4286;
}
.footer {
padding: 0 2rem 20% 2rem;
text-align: center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.footer a {
display: inline-block;
position: relative;
color: #303030;
}
.footer a:before {
content: '';
position: absolute;
right: 0;
bottom: 3px;
left: 0;
height: 1px;
background-color: #303030;
opacity: 0;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.footer a:hover:before, .footer a:active:before, .footer a:focus:before {
opacity: 0.5;
}
