<div class="wrapper">
<div class="rollin">
<div class="little-urn">
<img class="little-urn__body" src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/body.png">
<div class="wheels">
<span class="little-urn__wheel front"><img src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/wheel.png"></span>
<span class="little-urn__wheel back"><img src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/wheel.png"></span>
</div>
</div>
</div>
</div>
<div class="engage">
<p>Chuggin' Van | Yorkshire Tea's Little Urn<br> by <a href="https://twitter.com/iamjamie">Jamie Wright</a> of <a href="https://engageinteractive.co.uk" class="logo">Engage</a>.</p>
</div>
$body-width: 600px;
$body-height: 268px;
$wheel: 100px;
$wheel-offset: 20px;
$wheel-right: 48px;
$wheel-left: 72px;
$van-offset: $body-width + 10px;
html {
font-size: 10px;
background: #eee;
}
.wrapper {
padding: 75px 0 20px;
margin: 0 auto;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(210,238,255,1) 70%,rgba(174,201,108,1) 98%,rgba(51,51,51,1) 100%);
border-bottom: .2rem solid #333;
overflow:hidden;
}
.rollin {
animation: rollin 2s ease-in-out infinite both;
}
.little-urn {
backface-visibility: hidden;
perspective: 1000;
position: relative;
margin-left: auto;
margin-right: auto;
width: $body-width;
height: $body-height + $wheel-offset;
animation: wheelbump .3s cubic-bezier(0, 0, 0.2, 1) infinite both;
&__body {
width: $body-width;
height: $body-height;
transform-origin: 75% 75%;
animation: suspension .6s cubic-bezier(0, 0, 0.2, 1) infinite both;
}
&__wheel {
position: absolute;
display: block;
bottom: -$wheel-offset;
width: $wheel;
height: $wheel;
transform-origin: 50% 50%;
animation: wheelspin .8s linear infinite both;
&.front {
right: $wheel-right;
img {
animation: wheelbump .3s .15s cubic-bezier(0, 0, 0.2, 1) infinite both;
}
}
&.back {
left: $wheel-left;
img {
animation: wheelbump .3s cubic-bezier(0, 0, 0.2, 1) infinite both;
}
}
img {
display: block;
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
width: $wheel;
height: $wheel;
}
}
}
@keyframes suspension {
0% { transform: rotate(-.5deg) translateY(0); }
50% { transform: rotate(.5deg) translateY(2px); }
100% { transform: rotate(-.5deg) translateY(0); }
}
@keyframes wheelbump {
0% { transform: translateY(1px); }
50% { transform: translateY(0); }
100% { transform: translateY(1px); }
}
@keyframes wheelspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes rollin {
0% { transform: translateX(-1vw);}
50% { transform: translateX(1vw);}
100% { transform: translateX(-1vw);}
}
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
.engage {
position: relative;
padding: 10px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 700;
text-align: center;
color: #333;
font-smoothing: antialiased;
p {
overflow: hidden;
height: 50px;
}
a {
color: #333;
text-decoration: none;
}
.logo {
position: relative;
top: -2.95rem;
display: inline-block;
height: 51px;
width: 58px;
line-height: 0;
font-size: 0;
background: url(https://engage-codepen.s3.amazonaws.com/engage-black.svg)
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.