Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
118 lines (99 sloc) 2.47 KB
.director {
$delay: 8s;
background: #dededd url("../img/director-bg.jpg") no-repeat;
background-size: cover;
color: #626963;
.role {
color: #3a3a3a;
}
a {
color: #626963;
&:hover {
color: #aa250f;
}
}
.copy {
@include animation(director-copy 17s $delay infinite linear alternate);
left: 60vw;
top: 48%;
width: 100%;
}
@media screen and (min-width: 1200px) {
.copy {
left: 50vw;
top: 45%;
}
}
.composition {
@include animation(director-comp 17s $delay infinite linear alternate);
@include mask(url("../img/director-human.png") top left / cover no-repeat);
max-width: 1100px;
}
.human,
.trees,
.street {
height: 100%;
right: 0;
position: absolute;
width: 100%;
}
.human {
background: transparent url("../img/director-human.png") no-repeat;
background-size: cover;
}
.street,
.trees {
background-size: cover;
}
.street {
@include animation(director-street 18s $delay infinite linear alternate);
background: transparent url("../img/director-street.png") no-repeat -175px 0;
opacity: 0.7;
}
.trees {
@include animation(director-trees 18s $delay infinite linear alternate);
background: transparent url("../img/director-trees.png") no-repeat;
opacity: 0.75;
&::before {
@include animation(director-blip 9s $delay infinite linear);
background: transparent url("../img/director-blip.png") no-repeat 0 -100px;
content: "";
display: block;
height: 150%;
opacity: 0;
position: absolute;
width: 150%;
}
}
}
@include keyframes (director-copy) {
100% {
@include transform(translate(10%, 50%) scale(1.2));
}
}
@include keyframes (director-street) {
100% {
@include transform(translate(175px, -20px));
}
}
@include keyframes (director-trees) {
100% {
@include transform(translate(-175px, 10px));
}
}
@include keyframes (director-blip) {
40% {
opacity: 0;
}
40.1%, 40.3%, 40.5%, 40.7% {
opacity: 1;
}
40.2%, 40.4%, 40.6%, 40.8% {
opacity: 0;
}
}
@include keyframes (director-comp) {
100% {
@include transform(translateX(-4%) scale(1.2) skewX(3deg));
}
}