Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #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"}

              
            
!

CSS

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

JS

              
                Splitting();
              
            
!
999px

Console