This commit is contained in:
parent
f7a22abf66
commit
3f5622a54d
|
|
@ -0,0 +1 @@
|
||||||
|
.sass-cache
|
||||||
Binary file not shown.
|
|
@ -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-face {
|
||||||
font-family: "repulsor";
|
font-family: "repulsor";
|
||||||
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
|
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
|
||||||
|
|
@ -6,6 +57,45 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
|
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 {
|
html {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -40,96 +130,4 @@ header {
|
||||||
color: #ffb400;
|
color: #ffb400;
|
||||||
font-size: 30px; }
|
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 */
|
/*# sourceMappingURL=main.css.map */
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"version": 3,
|
"version": 3,
|
||||||
"mappings": "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",
|
"mappings": "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",
|
||||||
"sources": ["main.scss"],
|
"sources": ["_glitch.scss","_fonts.scss","_previews.scss","main.scss"],
|
||||||
"names": [],
|
"names": [],
|
||||||
"file": "main.css"
|
"file": "main.css"
|
||||||
}
|
}
|
||||||
|
|
@ -2,17 +2,13 @@
|
||||||
$white: #fff7e5;
|
$white: #fff7e5;
|
||||||
$yellow: #ffb400;
|
$yellow: #ffb400;
|
||||||
$blue: #004e66;
|
$blue: #004e66;
|
||||||
|
$black: #0e0e0e;
|
||||||
|
|
||||||
@font-face {
|
$gutter: 12px;
|
||||||
font-family: "repulsor";
|
|
||||||
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
|
@import 'glitch';
|
||||||
}
|
@import 'fonts';
|
||||||
@font-face {
|
@import 'previews';
|
||||||
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
|
// mixins
|
||||||
@mixin radial-background() {
|
@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) {
|
.header-img:nth-child(2) {
|
||||||
transform: translate3d(10px,0,0);
|
transform: translate3d(10px,0,0);
|
||||||
animation: sideshift 1s infinite linear;
|
animation: sideshift 2s infinite linear;
|
||||||
background-blend-mode: screen;
|
background-blend-mode: screen;
|
||||||
}
|
}
|
||||||
@keyframes sideshift {
|
@keyframes sideshift {
|
||||||
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
||||||
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
||||||
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
||||||
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
||||||
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
/*35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
||||||
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
|
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); } */
|
||||||
|
|
||||||
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||||
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||||
}
|
}
|
||||||
.header-img:nth-child(3) {
|
.header-img:nth-child(3) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: skew(10deg, 10deg);
|
transform: skew(10deg, 10deg);
|
||||||
|
|
|
||||||
55
index2.html
55
index2.html
|
|
@ -9,28 +9,57 @@
|
||||||
<header>
|
<header>
|
||||||
<h1>NoiseToSignal</h1>
|
<h1>NoiseToSignal</h1>
|
||||||
<h2>Just the right ratio, ≥ 1</h2>
|
<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>
|
</header>
|
||||||
<div class="episode-list">
|
<div class="episode-list">
|
||||||
<main>
|
<main>
|
||||||
<article class="preview">
|
<article class="preview">
|
||||||
<h1>E3: Nasenasenase<h1>
|
<div class="episode-displacement">
|
||||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
<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>
|
||||||
|
|
||||||
<article class="preview">
|
<article class="preview">
|
||||||
<h1>E2: Nasenasenase<h1>
|
<div class="episode-displacement">
|
||||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
<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>
|
||||||
|
|
||||||
<article class="preview">
|
<article class="preview">
|
||||||
<h1>E1: Nasenasenase<h1>
|
<div class="episode-displacement">
|
||||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
<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>
|
</article>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer id="left">Unne Links</footer>
|
<footer id="left">Unne Links</footer>
|
||||||
<footer id="center">Unne Midde</footer>
|
<footer id="center">Unne Midde</footer>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue