This commit is contained in:
bovenliggende
f7a22abf66
commit
3f5622a54d
|
|
@ -0,0 +1 @@
|
|||
.sass-cache
|
||||
Binair bestand niet weergegeven.
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
@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');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: local('Muli Light'), local('Muli-Light'), url(/assets2/fonts/Muli-Light.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: local('Muli ExtraBold'), local('Muli-ExtraBold'), url(/assets2/fonts/Muli-ExtraBold.ttf) format('truetype');
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/** glitch **/
|
||||
$gap-horizontal: 10px;
|
||||
|
||||
header {
|
||||
animation-name: glitch-anim-text;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
}
|
||||
|
||||
@keyframes glitch-anim-text {
|
||||
0% {
|
||||
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
||||
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
||||
}
|
||||
2% {
|
||||
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
}
|
||||
4% {
|
||||
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
}
|
||||
5% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
}
|
||||
6% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
}
|
||||
7% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
}
|
||||
8% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
}
|
||||
9% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
}
|
||||
9.9% {
|
||||
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
||||
}
|
||||
10%, 46% {
|
||||
transform: translate3d(0,0,0) scale3d(1,1,1);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
|
||||
47% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
}
|
||||
48% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
}
|
||||
49% {
|
||||
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
||||
}
|
||||
|
||||
|
||||
50%, 100% {
|
||||
transform: translate3d(0,0,0) scale3d(1,1,1);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
article.preview {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2*$gutter;
|
||||
|
||||
padding: $gutter;
|
||||
border: 1px solid $blue;
|
||||
|
||||
background: transparentize($black, 0.6);
|
||||
background-blend-mode: lighten;
|
||||
|
||||
div.episode-displacement {
|
||||
position: relative;
|
||||
}
|
||||
div.episode-counter {
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
top: 1px;
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
color: $yellow;
|
||||
opacity: .8;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,54 @@
|
|||
/** glitch **/
|
||||
header {
|
||||
animation-name: glitch-anim-text;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite; }
|
||||
|
||||
@keyframes glitch-anim-text {
|
||||
0% {
|
||||
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1);
|
||||
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
|
||||
2% {
|
||||
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
|
||||
4% {
|
||||
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||
5% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
|
||||
6% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
|
||||
7% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
|
||||
8% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
|
||||
9% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||
9.9% {
|
||||
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
|
||||
10%, 46% {
|
||||
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
|
||||
47% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
|
||||
48% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
|
||||
49% {
|
||||
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
|
||||
50%, 100% {
|
||||
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
|
||||
@font-face {
|
||||
font-family: "repulsor";
|
||||
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
|
||||
|
|
@ -6,6 +57,45 @@
|
|||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: local("Muli Light"), local("Muli-Light"), url(/assets2/fonts/Muli-Light.ttf) format("truetype"); }
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: local("Muli ExtraBold"), local("Muli-ExtraBold"), url(/assets2/fonts/Muli-ExtraBold.ttf) format("truetype"); }
|
||||
article.preview {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 24px;
|
||||
padding: 12px;
|
||||
border: 1px solid #004e66;
|
||||
background: rgba(14, 14, 14, 0.4);
|
||||
background-blend-mode: lighten; }
|
||||
article.preview div.episode-displacement {
|
||||
position: relative; }
|
||||
article.preview div.episode-counter {
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
top: 1px;
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
color: #ffb400;
|
||||
opacity: .8;
|
||||
z-index: -1; }
|
||||
article.preview h1 {
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
color: #fff7e5; }
|
||||
article.preview p {
|
||||
color: #fff7e5; }
|
||||
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -40,96 +130,4 @@ header {
|
|||
color: #ffb400;
|
||||
font-size: 30px; }
|
||||
|
||||
/** glitch **/
|
||||
header {
|
||||
/* Hover flash animation on last image */ }
|
||||
header .glitch {
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
max-width: 400px;
|
||||
height: 100px;
|
||||
max-height: calc(400px * 1.25);
|
||||
overflow: hidden;
|
||||
margin: 0 auto; }
|
||||
header .glitch:hover {
|
||||
cursor: pointer; }
|
||||
header .glitch__img {
|
||||
position: absolute;
|
||||
top: calc(-1 * 5px);
|
||||
left: calc(-1 * 10px);
|
||||
width: calc(100% + 10px * 2);
|
||||
height: calc(100% + 5px * 2);
|
||||
background: url(../img/1.jpg) no-repeat 50% 0;
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(2) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(3) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(4) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(5) {
|
||||
background-color: #af4949;
|
||||
background-blend-mode: overlay; }
|
||||
header .glitch__img:nth-child(n+2) {
|
||||
opacity: 0; }
|
||||
header .glitch:hover .glitch__img:nth-child(n+2) {
|
||||
opacity: 1; }
|
||||
header .glitch:hover .glitch__img:nth-child(2) {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
|
||||
header .glitch:hover > .glitch__img:nth-child(3) {
|
||||
transform: translate3d(calc(-1 * 10px), 0, 0);
|
||||
animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
|
||||
header .glitch:hover > .glitch__img:nth-child(4) {
|
||||
transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
|
||||
animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
|
||||
header .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(10px, 5px, 0); }
|
||||
33%, 100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0, 0); } } }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["main.scss"],
|
||||
"mappings": "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",
|
||||
"sources": ["_glitch.scss","_fonts.scss","_previews.scss","main.scss"],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
|
|
@ -2,17 +2,13 @@
|
|||
$white: #fff7e5;
|
||||
$yellow: #ffb400;
|
||||
$blue: #004e66;
|
||||
$black: #0e0e0e;
|
||||
|
||||
@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');
|
||||
}
|
||||
$gutter: 12px;
|
||||
|
||||
@import 'glitch';
|
||||
@import 'fonts';
|
||||
@import 'previews';
|
||||
|
||||
// mixins
|
||||
@mixin radial-background() {
|
||||
|
|
@ -58,154 +54,3 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
/** 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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@
|
|||
}
|
||||
.header-img:nth-child(2) {
|
||||
transform: translate3d(10px,0,0);
|
||||
animation: sideshift 1s infinite linear;
|
||||
animation: sideshift 2s infinite linear;
|
||||
background-blend-mode: screen;
|
||||
}
|
||||
@keyframes sideshift {
|
||||
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
||||
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
||||
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
||||
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
||||
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
||||
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
|
||||
@keyframes sideshift {
|
||||
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
||||
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
||||
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
||||
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
||||
/*35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
||||
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); } */
|
||||
|
||||
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||
}
|
||||
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||
}
|
||||
.header-img:nth-child(3) {
|
||||
opacity: 1;
|
||||
transform: skew(10deg, 10deg);
|
||||
|
|
|
|||
55
index2.html
55
index2.html
|
|
@ -9,28 +9,57 @@
|
|||
<header>
|
||||
<h1>NoiseToSignal</h1>
|
||||
<h2>Just the right ratio, ≥ 1</h2>
|
||||
<div class="glitch">
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="episode-list">
|
||||
<main>
|
||||
<article class="preview">
|
||||
<h1>E3: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
<div class="episode-displacement">
|
||||
<div class="episode-counter">#E3</div>
|
||||
</div>
|
||||
<h1>
|
||||
Nasenasenase
|
||||
</h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</article>
|
||||
|
||||
<article class="preview">
|
||||
<h1>E2: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
<div class="episode-displacement">
|
||||
<div class="episode-counter">#E2</div>
|
||||
</div>
|
||||
<h1>
|
||||
Nasenasenase
|
||||
</h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</article>
|
||||
|
||||
<article class="preview">
|
||||
<h1>E1: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
<div class="episode-displacement">
|
||||
<div class="episode-counter">#E1</div>
|
||||
</div>
|
||||
<h1>
|
||||
Nasenasenase
|
||||
</h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
<footer id="left">Unne Links</footer>
|
||||
<footer id="center">Unne Midde</footer>
|
||||
|
|
|
|||
Laden…
Verwijs in nieuw issue