#wrap
%h1.badge{"data-splitting" => "chars"} 2018TOPTEN
%input{:checked => "checked", :name => "record", :type => "radio"}/
-9.times do
%input{:name => "record", :type => "radio"}/
-10.times do
.cover
.inner
.title
%h1{"data-splitting" => "chars"} Rolling Blackouts C.F.
%h1{"data-splitting" => "chars"} Portrayal of Guilt
%h1{"data-splitting" => "chars"} Daughters
%h1{"data-splitting" => "chars"} Swingin' Utters
%h1{"data-splitting" => "chars"} Devils Teeth
%h1{"data-splitting" => "chars"} Culture Abuse
%h1{"data-splitting" => "chars"} Sleep
%h1{"data-splitting" => "chars"} Janelle Monáe
%h1{"data-splitting" => "chars"} Fucked Up
%h1{"data-splitting" => "chars"} Lucy Dacus
.info
%h3 "Hope Downs"
%h3 "Let Pain Be Your Guide"
%h3 "You Won't Get What You Want"
%h3 "Peace and Love"
%h3 "Suki Yaki Hot!"
%h3 "Bay Dream"
%h3 "The Sciences"
%h3 "Dirty Computer"
%h3 "Dose Your Dreams"
%h3 "Historian"
%a{:href => "https://rollingblackoutscoastalfever.bandcamp.com/album/hope-downs", :target => "blank"} Listen
%a{:href => "https://portrayalofguilt.com/album/let-pain-be-your-guide", :target => "blank"} Listen
%a{:href => "https://daughters.bandcamp.com/album/you-wont-get-what-you-want", :target => "blank"} Listen
%a{:href => "https://swinginutters.bandcamp.com/album/peace-and-love", :target => "blank"} Listen
%a{:href => "https://devilsteeth.bandcamp.com/album/suki-yaki-hot", :target => "blank"} Listen
%a{:href => "https://cultureabuse.bandcamp.com/album/bay-dream", :target => "blank"} Listen
%a{:href => "https://vimeo.com/265792803", :target => "blank"} Listen
%a{:href => "https://soundcloud.com/janelle-monae/sets/dirty-computer", :target => "blank"} Listen
%a{:href => "https://fuckedup.bandcamp.com/album/dose-your-dreams", :target => "blank"} Listen
%a{:href => "https://open.spotify.com/album/01GO03odsNlNLtvNETukWT", :target => "blank"} Listen
.markers
-10.times do
.box
.indicator
%svg{:style => "display:none", :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
%defs
%filter#wave
%feturbulence#turbulence{:basefrequency => "0.1 0.001", :numoctaves => "1", :result => "noise", :seed => "13"}
%fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "50"}
%svg{:style => "display:none", :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
%defs
%filter#jagged
%feturbulence#turbulence{:basefrequency => "0.02", :numoctaves => "3", :result => "noise", :seed => "0"}
%fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "2"}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
width:100vw;
overflow:hidden;
background-image: url(data:image/png;base64,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);
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:repeating-linear-gradient(45deg, #000, #000 1px, rgba(0,0,0,0.001) 1px, rgba(0,0,0,0.001) 20px);
}
*{
font-family:"Helvetica Neue", Helvetica;
}
#wrap{
width:400px;
height:200px;
min-width:400px;
position:relative;
z-index:9;
&:before{
content:'';
position:absolute;
width:550px;
height:350px;
box-shadow:0 0 0 3px #000;
top:-100px;
left:-75px;
background:#fff;
z-index:-1;
pointer-events:none;
filter:url(#jagged);
}
.badge{
position:absolute;
font-size:18px;
top:-160px;
right:-125px;
animation:spin 5s linear infinite;
width:100px;
height:100px;
@keyframes spin{
to{
transform:rotate(360deg);
}
}
&:before{
content:'';
position:absolute;
width:100px;
height:100px;
border-radius:100%;
background:#000;
left:0px;
top:0px;
filter:url(#jagged);
}
.word{
.char{
position:absolute;
left:45px;
top:10px;
color:#fff;
filter:url(#jagged);
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
display:inline-block;
transform-origin:50% 40px;
transform:rotate(#{($i - 1) * 36}deg);
}
}
}
}
}
.title{
position:absolute;
width:125%;
height:80px;
top:-100px;
left:-12.5%;
text-transform:uppercase;
filter:url(#jagged);
h1{
font-size:40px;
width:100%;
text-align:center;
letter-spacing:-2px;
position:absolute;
top:0;
left:0;
.word{
.char{
display:inline-block;
opacity:0;
transform:scale(0) rotate(0deg) translateY(0px);
transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
will-change:transform;
}
}
}
}
.info{
position:absolute;
width:175px;
right:0px;
top:0;
height:200px;
h3, a{
margin-top:0;
text-transform:uppercase;
letter-spacing:-1.5px;
filter:url(#jagged);
font-size:24px;
display:inline-block;
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transition:0.3s ease-in-out;
transition-delay:0.5s;
position:absolute;
width:100%;
top:0;
right:0;
&:before{
content:'';
position:absolute;
width:110%;
height:110%;
background:#000;
left:-5%;
top:-5%;
transform-origin:left;
z-index:2;
transition:0.3s ease-in-out;
transition-delay:0s;
}
}
a{
cursor:pointer;
top:auto;
bottom:0px;
color:#fff;
padding:10px 30px;
text-align:center;
text-decoration:none;
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
width:auto;
box-shadow:inset 0 0 0 2px #000;
right:35px;
&:after{
content:'LISTEN';
position:absolute;
width:100%;
left:200px;
top:0%;
z-index:2;
padding:10px 30px 10px;
text-align:left;
transition:left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color:#000;
}
&:before{
background:#fff;
transform-origin:right;
}
&:hover{
&:after{
animation:shake 0.05s ease-in-out infinite alternate;
color:#fff;
background:#000;
@keyframes shake{
from{
transform:translateX(-0.5px) translateY(1.5px)
}
to{
transform:translateX(1.5px) translateY(-0.5px)
}
}
}
}
}
}
.markers{
position:absolute;
bottom:-100px;
width:100%;
height:40px;
filter:url(#jagged);
background:#000;
padding:0 10px;
*{
color:#fff;
}
.indicator{
position:absolute;
width: 40px;
height: 40px;
bottom:-42.5px;
left:0;
transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
&:before{
content:'';
position:absolute;
left:25px;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #000 transparent;
}
}
.box{
position:relative;
width:10%;
height:100%;
float:left;
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
&:before, &:after{
content:"#{$i}";
position:absolute;
font-size:30px;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
transition:0.2s ease-in-out;
}
&:after{
content:'';
width:45px;
height:45px;
border-radius:100%;
box-shadow:0 0 0 0 #000;
}
}
}
}
}
input{
z-index:999;
position:absolute;
width:40px;
height:40px;
bottom:-100px;
opacity:0;
cursor:pointer;
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
left:#{($i - 1) * 40px};
&:hover{
& ~ .markers{
.box{
&:nth-of-type(#{$i}){
&:before{
transform:translateX(-50%) translateY(-50%) scale(1.15);
}
}
}
}
}
&:checked{
& ~ .markers{
.indicator{
left:#{($i - 1) * 40px};
}
}
& ~ .info{
h3{
&:nth-of-type(#{$i}){
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition:0.3s ease-in-out;
transition-delay:0.5s;
&:before{
transition:0.3s ease-in-out;
transition-delay:0.7s;
transform:scaleX(0);
}
}
}
a{
&:nth-of-type(#{$i}){
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition:0.1s ease-in-out;
transition-delay:0.5s;
&:before{
transition:0.5s ease-in-out;
transition-delay:0.7s;
transform:scaleX(0);
}
&:after{
left:0;
transition-delay:0.7s;
}
}
}
}
& ~ .title{
h1{
&:nth-of-type(#{$i}){
.word{
@for $j from 1 through 5{
&:nth-of-type(#{$j}){
.char{
opacity:1;
@for $i from 1 through 25{
&:nth-of-type(#{$i}){
transform:scale(1) rotate(random(3) - 2 + deg) translateY(random(3) - 2 + px);
transition-delay:#{($i / 40) + ($j / 15) + 1}s;
}
}
}
}
}
}
}
}
}
& ~ .cover{
&:nth-of-type(#{$i}){
background-position:50% 0px;
transition-delay:1s;
&:before{
background-position:50% 200px;
transition-delay:0.9s;
opacity:1;
}
}
}
}
}
}
}
.cover{
filter:saturate(0);
&:first-of-type{
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/Rolling%20Blackouts%20Coastal%20Fever_%20Hope%20Downs.jpg');
}
&:nth-of-type(2){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/a0642158095_16.jpg');
}
&:nth-of-type(3){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/daughters.jpg');
}
&:nth-of-type(4){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/swinginutters_0.jpg');
}
&:nth-of-type(5){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/a0964341657_16.jpg');
}
&:nth-of-type(6){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/87555_CultureAbuse.jpg.540x540_q90_crop.jpg');
}
&:nth-of-type(7){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/sleep-the-sciences-1524167366-compressed1-1524186011-compressed.jpg');
}
&:nth-of-type(8){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/dirtycomputer.jpg');
}
&:nth-of-type(9){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/fuckedup.jpg');
}
&:nth-of-type(10){
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/Lucy%20Dacus_%20Historian.jpg');
}
width:200px;
height:200px;
position:absolute;
top:0;
left:0;
transition:0.125s ease-in-out;
background-size:contain;
background-repeat:no-repeat;
background-position:50% -300px;
transition-delay:0s;
display:inline-block;
float:left;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
top:-100%;
left:-12.5px;
filter:url(#wave);
z-index:-1;
background-image:inherit;
background-size:contain;
background-repeat:no-repeat;
background-position:50% -300px;
transition:background-position 0.25s ease-in-out, opacity 0.15s ease-in-out;
opacity:0;
}
.inner{
width:300px;
height:300px;
position:absolute;
background-size:cover;
transform:translateY(0px);
}
}
}
svg{
position:absolute;
width:0;
height:0;
}
}Splitting();
External CSS
This Pen doesn't use any external CSS resources.