212 lines
5.4 KiB
SCSS
212 lines
5.4 KiB
SCSS
// palette
|
|
$white: #fff7e5;
|
|
$yellow: #ffb400;
|
|
$blue: #004e66;
|
|
|
|
@font-face {
|
|
font-family: "repulsor";
|
|
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: 'Muli';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
|
|
}
|
|
|
|
// mixins
|
|
@mixin radial-background() {
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
|
|
background: $blue; /* Old browsers */
|
|
background: -moz-radial-gradient(center, ellipse cover, $blue 0%, #145266 17%, #0e0e0e 100%); /* FF3.6-15 */
|
|
background: -webkit-radial-gradient(center, ellipse cover, $blue 0%,#145266 17%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: radial-gradient(ellipse at center, $blue 0%, #145266 17%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
}
|
|
|
|
|
|
html {
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
height: 100%;
|
|
font-family: Muli;
|
|
}
|
|
body {
|
|
@include radial-background();
|
|
}
|
|
|
|
|
|
header {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 800px;
|
|
height: 100px;
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: $white;
|
|
font-family: repulsor;
|
|
font-size: 42px;
|
|
margin-bottom: 0;
|
|
}
|
|
h2 {
|
|
margin-top: 0;
|
|
|
|
text-align: center;
|
|
color: $yellow;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
/** glitch **/
|
|
$glitch-width: 800px;
|
|
$glitch-height: 100px;
|
|
$gap-horizontal: 10px;
|
|
$gap-vertical: 5px;
|
|
$time-anim: 4s;
|
|
$delay-anim: 2s;
|
|
$blend-mode-1: none;
|
|
$blend-mode-2: none;
|
|
$blend-mode-3: none;
|
|
$blend-mode-4: none;
|
|
$blend-mode-5: overlay;
|
|
$blend-color-1: transparent;
|
|
$blend-color-2: transparent;
|
|
$blend-color-3: transparent;
|
|
$blend-color-4: transparent;
|
|
$blend-color-5: #af4949;
|
|
|
|
header {
|
|
.glitch {
|
|
position: absolute;
|
|
width: $glitch-width;
|
|
max-width: 400px;
|
|
height: $glitch-height;
|
|
max-height: calc(400px * 1.25);
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.glitch:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.glitch__img {
|
|
position: absolute;
|
|
top: calc(-1 * #{$gap-vertical});
|
|
left: calc(-1 * #{$gap-horizontal});
|
|
width: calc(100% + #{$gap-horizontal} * 2);
|
|
height: calc(100% + #{$gap-vertical} * 2);
|
|
background: url(../img/1.jpg) no-repeat 50% 0;
|
|
background-color: $blend-color-1;
|
|
background-size: cover;
|
|
background-blend-mode: $blend-mode-1;
|
|
}
|
|
|
|
.glitch__img:nth-child(2) {
|
|
background-color: $blend-color-2;
|
|
background-blend-mode: $blend-mode-2;
|
|
}
|
|
|
|
.glitch__img:nth-child(3) {
|
|
background-color: $blend-color-3;
|
|
background-blend-mode: $blend-mode-3;
|
|
}
|
|
|
|
.glitch__img:nth-child(4) {
|
|
background-color: $blend-color-4;
|
|
background-blend-mode: $blend-mode-4;
|
|
}
|
|
|
|
.glitch__img:nth-child(5) {
|
|
background-color: $blend-color-5;
|
|
background-blend-mode: $blend-mode-5;
|
|
}
|
|
|
|
.glitch__img:nth-child(n+2) {
|
|
opacity: 0;
|
|
}
|
|
.glitch:hover .glitch__img:nth-child(n+2) {
|
|
opacity: 1;
|
|
}
|
|
.glitch:hover .glitch__img:nth-child(2) {
|
|
transform: translate3d($gap-horizontal,0,0);
|
|
animation: glitch-anim-1-horizontal $time-anim infinite linear alternate;
|
|
}
|
|
|
|
.glitch:hover > .glitch__img:nth-child(3) {
|
|
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0);
|
|
animation: glitch-anim-2-horizontal $time-anim infinite linear alternate;
|
|
}
|
|
|
|
.glitch:hover > .glitch__img:nth-child(4) {
|
|
transform: translate3d(0, calc(-1 * #{$gap-vertical}), 0) scale3d(-1,-1,1);
|
|
animation: glitch-anim-3-horizontal $time-anim infinite linear alternate;
|
|
}
|
|
|
|
/* Hover flash animation on last image */
|
|
.glitch:hover > .glitch__img:nth-child(5) {
|
|
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
|
|
}
|
|
|
|
@keyframes glitch-anim-1-horizontal {
|
|
0% {
|
|
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
|
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
|
}
|
|
10% {
|
|
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
|
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
|
}
|
|
20% {
|
|
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
|
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
|
}
|
|
30% {
|
|
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
|
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
|
}
|
|
40% {
|
|
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
|
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
|
}
|
|
50% {
|
|
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
|
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
|
}
|
|
60% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
|
}
|
|
70% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
|
}
|
|
80% {
|
|
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
}
|
|
90% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
}
|
|
100% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
|
}
|
|
|
|
@keyframes glitch-anim-flash {
|
|
0% {
|
|
opacity: 0.2;
|
|
transform: translate3d($gap-horizontal, $gap-vertical, 0);
|
|
}
|
|
33%, 100% {
|
|
opacity: 0;
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|