This commit is contained in:
Manuel Dossinger 2019-02-06 22:55:40 +01:00
förälder f7a22abf66
incheckning 3f5622a54d
10 ändrade filer med 287 tillägg och 279 borttagningar

1
assets2/css/.gitignore vendored Normal file
Visa fil

@ -0,0 +1 @@
.sass-cache

23
assets2/css/_fonts.scss Normal file
Visa fil

@ -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');
}

74
assets2/css/_glitch.scss Normal file
Visa fil

@ -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%);
}
}

Visa fil

@ -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;
}
}

Visa fil

@ -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 */

Visa fil

@ -1,7 +1,7 @@
{
"version": 3,
"mappings": "AAKA,UAGC;EAFC,WAAW,EAAE,UAAU;EACvB,GAAG,EAAE,sDAAsD;AAE7D,UAKC;EAJC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,qGAAqG;AAa5G,IAAK;EACH,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EAET,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;;AAEnB,IAAK;EAfH,2HAA2H;EAC3H,UAAU,EAhBL,OAAO;EAgBO,kBAAkB;EACrC,UAAU,EAAE,kFAAgF;EAAE,cAAc;EAC5G,UAAU,EAAE,qFAAiF;EAAE,6BAA6B;EAC5H,UAAU,EAAE,yEAAsE;EAAE,sDAAsD;;AAgB5I,MAAO;EACL,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EAEb,SAAG;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA7CD,OAAO;IA8CX,WAAW,EAAE,QAAQ;IACrB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,CAAC;EAElB,SAAG;IACD,UAAU,EAAE,CAAC;IAEb,UAAU,EAAE,MAAM;IAClB,KAAK,EArDA,OAAO;IAsDZ,SAAS,EAAE,IAAI;;AAInB,cAAc;AAkBd,MAAO;EAoEL,yCAAyC;EAnEzC,cAAQ;IACN,QAAQ,EAAE,QAAQ;IAClB,KAAK,EApBM,KAAK;IAqBhB,SAAS,EAAE,KAAK;IAChB,MAAM,EArBM,KAAK;IAsBjB,UAAU,EAAE,kBAAkB;IAC9B,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,MAAM;EAGhB,oBAAc;IACZ,MAAM,EAAE,OAAO;EAGjB,mBAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,cAA2B;IAChC,IAAI,EAAE,eAA6B;IACnC,KAAK,EAAE,qBAAmC;IAC1C,MAAM,EAAE,oBAAiC;IACzC,UAAU,EAAE,iCAAiC;IAC7C,gBAAgB,EA5BJ,WAAW;IA6BvB,eAAe,EAAE,KAAK;IACtB,qBAAqB,EAnCV,IAAI;EAsCjB,gCAA0B;IACxB,gBAAgB,EAjCJ,WAAW;IAkCvB,qBAAqB,EAvCV,IAAI;EA0CjB,gCAA0B;IACxB,gBAAgB,EArCJ,WAAW;IAsCvB,qBAAqB,EA3CV,IAAI;EA8CjB,gCAA0B;IACxB,gBAAgB,EAzCJ,WAAW;IA0CvB,qBAAqB,EA/CV,IAAI;EAkDjB,gCAA0B;IACxB,gBAAgB,EA7CJ,OAAO;IA8CnB,qBAAqB,EAnDV,OAAO;EAsDpB,kCAA4B;IAC1B,OAAO,EAAE,CAAC;EAEZ,gDAA0C;IACxC,OAAO,EAAE,CAAC;EAEZ,8CAAwC;IACtC,SAAS,EAAE,uBAAgC;IAC3C,SAAS,EAAE,qDAA6D;EAG1E,gDAA0C;IACxC,SAAS,EAAE,kCAA8C;IACzD,SAAS,EAAE,qDAA6D;EAG1E,gDAA0C;IACxC,SAAS,EAAE,oDAA+D;IAC1E,SAAS,EAAE,qDAA6D;EAI1E,gDAA0C;IACxC,SAAS,EAAE,6CAA4C;AAGzD,mCAyDC;EAxDC,EAAG;IACD,iBAAiB,EAAE,qCAAqC;IACxD,SAAS,EAAE,qCAAqC;EAElD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,qCAAqC;IACxD,SAAS,EAAE,qCAAqC;EAElD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,GAAI;IACF,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAEtD,IAAK;IACH,iBAAiB,EAAE,yCAAyC;IAC5D,SAAS,EAAE,yCAAyC;EAGtD,4BASC;IARC,EAAG;MACD,OAAO,EAAE,GAAG;MACZ,SAAS,EAAE,yBAA8C;IAE3D,SAAU;MACR,OAAO,EAAE,CAAC;MACV,SAAS,EAAE,oBAAkB",
"sources": ["main.scss"],
"mappings": "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",
"sources": ["_glitch.scss","_fonts.scss","_previews.scss","main.scss"],
"names": [],
"file": "main.css"
}

Visa fil

@ -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);
}
}
}
}

Visa fil

@ -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);

Visa fil

@ -9,28 +9,57 @@
<header>
<h1>NoiseToSignal</h1>
<h2>Just the right ratio, &nbsp; ≥ 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>