A small experiment which quickly turned into something more.
A Pen by vaniadimova on CodePen.
<div class="untitled"> | |
<div class="untitled__slides"> | |
<div class="untitled__slide"> | |
<div class="untitled__slideBg"></div> | |
<div class="untitled__slideContent"> | |
<span>Toronto</span> | |
<span>Ontario</span> | |
<a class="button" href="https://vaniadimova.ca/" target="/black">WebSite/WP</a> | |
</div> | |
</div> | |
<div class="untitled__slide"> | |
<div class="untitled__slideBg"></div> | |
<div class="untitled__slideContent"> | |
<span>Vania</span> | |
<span>Dimova</span> | |
<a class="button" href="https://vaniadimova.ca/about" target="/black">About me</a> | |
</div> | |
</div> | |
<div class="untitled__slide"> | |
<div class="untitled__slideBg"></div> | |
<div class="untitled__slideContent"> | |
<span>Web</span> | |
<span>Dev</span> | |
<a class="button" href="http://vaniadimova.ca/2020/01/26/711/" target="/black">Blog</a> | |
</div> | |
</div> | |
<div class="untitled__slide"> | |
<div class="untitled__slideBg"></div> | |
<div class="untitled__slideContent"> | |
<span>Photo</span> | |
<span>Gallery</span> | |
<a class="button" href="https://codepen.io/vaniadimova/full/ExaMmOg" target="/black">Gallery</a> | |
</div> | |
</div> | |
</div> | |
<div class="untitled__shutters"></div> | |
</div> |
A small experiment which quickly turned into something more.
A Pen by vaniadimova on CodePen.
$t: 2.5s; | |
$e1: cubic-bezier(0.8, 0.00, 0.1, 1); | |
$e2: cubic-bezier(0.600, 0.040, 0.980, 0.335); | |
$er: linear; | |
$color: hsl(15,75%,40%); | |
$font: 'Abril Fatface', sans-serif; | |
$slides: 4; | |
$images: url(https://images.unsplash.com/photo-1524673278499-6c651bf78b14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) url(https://images.unsplash.com/photo-1526931761325-e5ed4d1be847?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) url(https://unsplash.it/g/1500/1000?image=1077) url(https://unsplash.it/g/1500/1200?image=345); | |
html, body{ | |
width: 100vw; | |
height: 100vh; | |
overflow: hidden; | |
} | |
.untitled{ | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
@keyframes rotateHue { | |
0%{ filter: hue-rotate(0deg); } | |
20%{ filter: hue-rotate(0deg); } | |
25%{ filter: hue-rotate(90deg); } | |
45%{ filter: hue-rotate(90deg); } | |
50%{ filter: hue-rotate(180deg); } | |
70%{ filter: hue-rotate(180deg); } | |
75%{ filter: hue-rotate(270deg); } | |
95%{ filter: hue-rotate(270deg); } | |
100%{ filter: hue-rotate(360deg); } | |
} | |
animation: rotateHue infinite $t*$slides*2 linear; | |
animation-delay: $t/4; | |
&__shutters{ | |
position: absolute; | |
height: 150vmax; | |
width: 150vmax; | |
left: calc(50% - 75vmax); | |
top: calc(50% - 75vmax); | |
pointer-events: none; | |
z-index: 2; | |
@keyframes rotateFrame{ | |
0%{ transform: rotate(0deg);} | |
100%{ transform: rotate(180deg);} | |
} | |
animation: rotateFrame $t*4 $er infinite; | |
&:before, &:after{ | |
content: ''; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
left: 50%; | |
transform: translate3d(-50%, 0, 0); | |
background-color: $color; | |
pointer-events: auto; | |
} | |
&:before{ | |
bottom: 50%; | |
@keyframes openTop{ | |
0%{ transform: translate3d(-50%, 0, 0); animation-timing-function: $e1; } | |
40%{ transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: $e2; } | |
70%{ transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: $e2; } | |
100%{ transform: translate3d(-50%, 0, 0); animation-timing-function: $e2; } | |
} | |
animation: openTop $t*2 infinite; | |
} | |
&:after{ | |
top: 50%; | |
@keyframes openBottom{ | |
0%{ transform: translate3d(-50%, 0, 0); animation-timing-function: $e1; } | |
40%{ transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: $e2; } | |
70%{ transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: $e2; } | |
100%{ transform: translate3d(-50%, 0, 0); animation-timing-function: $e2; } | |
} | |
animation: openBottom $t*2 infinite; | |
} | |
} | |
&__slides{ | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
left: 0; | |
background-color: $color; | |
} | |
&__slide{ | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
opacity: 0; | |
@keyframes showHideSlide{ | |
0%{ | |
opacity: 1; | |
pointer-events: auto; | |
z-index: 1; | |
} | |
#{100% / $slides}{ | |
opacity: 0; | |
pointer-events: none; | |
z-index: -1; | |
} | |
100%{ | |
opacity: 0; | |
pointer-events: none; | |
z-index: -1; | |
} | |
} | |
animation: showHideSlide infinite $t*$slides*2 steps(1); | |
@for $i from 1 through $slides{ | |
&:nth-child(#{$i}){ | |
animation-delay: $t * ($i - 1) * 2; | |
.untitled__slideBg{ | |
background-image: nth($images, $i); | |
} | |
} | |
} | |
} | |
&__slideBg{ | |
position: relative; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
left: 0; | |
background-size: cover; | |
background-position: center; | |
background-color: $color; | |
background-blend-mode: hard-light; | |
opacity: 1; | |
z-index: -1; | |
@keyframes bgInOut{ | |
0%{ transform: rotate(-45deg) scale(1.1); animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);} | |
33%{ transform: rotate(0deg);} | |
50%{ transform: rotate(0deg); } | |
66%{ transform: rotate(0deg); animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); } | |
100%{ transform: rotate(45deg) scale(0.9);} | |
} | |
animation: bgInOut $t*4 -$t*2 infinite; | |
} | |
&__slideContent{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate3d(-50%,-50%,0); | |
color: white; | |
font-family: $font; | |
line-height: 0.8; | |
letter-spacing: -0.025em; | |
z-index: 2; | |
opacity: 1; | |
text-shadow: 0 0 0.5em rgba($color,0.25); | |
mix-blend-mode: lighten; | |
span{ | |
display: block; | |
font-size: 15vmin; | |
} | |
} | |
} | |
.button{ | |
font-family:'Roboto Mono', sans-serif; | |
text-decoration: none; | |
font-weight: 800; | |
text-transform: uppercase; | |
font-size: 2vmin; | |
display: inline-block; | |
position: relative; | |
border: 3px solid white; | |
box-shadow: -0.5vmin 0.5vmin 0 rgba(white, 0.5); | |
background: transparent; | |
margin-top: 5vmin; | |
mix-blend-mode: lighten; | |
color: white; | |
padding: 2vmin 2vmin 1.8vmin 2vmin; | |
letter-spacing: 0.1em; | |
text-shadow: none; | |
line-height: 1; | |
transform: translate3d(0.5vmin, -0.5vmin, 0); | |
transition: all 100ms linear; | |
&:hover{ | |
transform: translate3d(1vmin, -1vmin, 0); | |
box-shadow: -1vmin 1vmin 0 rgba(white, 0.5); | |
background: white; | |
color: black; | |
} | |
&:active{ | |
transform: translate3d(0px, 0px, 0); | |
box-shadow: -0px 0px 0 rgba(white, 0.5); | |
} | |
} | |