circle stacks

circle-stacks.markdown

circle stacks

A Pen by Cat Burston on CodePen.

License.

index.html

<div class="container">
  <div class="circle" id="dial1">
    <!--<h1>
      <span class="char1">o</span>
      <span class="char2">n</span>
      <span class="char3">e</span>
    </h1>-->
    <ul>
      <li class="item1">summertime</li>
      <li class="item2">someone to watch over me</li>
      <li class="item3">rhapsody in blue</li>
      <li class="item4">prelude No 3</li>
      <li class="item5">1111</li>
      <li class="item6">aaaa</li>
      <li class="item7">bbbb</li>
      <li class="item8">cccc</li>
      <li class="item9">dddd</li>
      <li class="item10">1111</li>
      <li class="item11">iiii</li>
      <li class="item12">jjjj</li>
      <li class="item13">kkkk</li>
      <li class="item14">llll</li>
      <li class="item15">mmmm</li>
      <li class="item16">nnnn</li>
      <li class="item17">oooo</li>
      <li class="item18">pppp</li>
      <li class="item19">qqqq</li>
      <li class="item20">rrrr</li>
      <li class="item21">ssss</li>
      <li class="item22">tttt</li>
      <li class="item23">uuuu</li>
      <li class="item24">vvvv</li>
      <li class="item25">wwww</li>
      <li class="item26">nnnn</li>
      <li class="item27">oooo</li>
      <li class="item28">pppp</li>
      <li class="item29">qqqq</li>
      <li class="item30">rrrr</li>
      <li class="item31">ssss</li>
      <li class="item32">tttt</li>
    </ul>
  </div>
  <div class="circle" id="dial2">
    <h1>
      <span class="char1">-</span>
      <span class="char2">w</span>
      <span class="char3">o</span>
      <span class="char4">r</span>
      <span class="char5">k</span>
      <span class="char6">s</span>
      <span class="char7">-</span>
    </h1>
    <ul>
      <li class="item1">eeee</li>
      <li class="item2">ffff</li>
      <li class="item3">they all laughed</li>
      <li class="item4">somebody loves me</li>
      <li class="item5">how long has this been going on?</li>
      <li class="item6">mine</li>
      <li class="item7">fascinating rhythm</li>
      <li class="item8">best known works</li>
      <li class="item9">hhhh</li>
      <li class="item10">2222</li>
      <li class="item11">iiii</li>
      <li class="item12">jjjj</li>
      <li class="item13">kkkk</li>
      <li class="item14">llll</li>
      <li class="item15">mmmm</li>
      <li class="item16">nnnn</li>
      <li class="item17">oooo</li>
      <li class="item18">pppp</li>
      <li class="item19">qqqq</li>
      <li class="item20">rrrr</li>
      <li class="item21">ssss</li>
      <li class="item22">tttt</li>
      <li class="item23">uuuu</li>
      <li class="item24">vvvv</li>
      <li class="item25">wwww</li>
      <li class="item26">nnnn</li>
      <li class="item27">oooo</li>
      <li class="item28">pppp</li>
      <li class="item29">qqqq</li>
      <li class="item30">rrrr</li>
      <li class="item31">ssss</li>
      <li class="item32">tttt</li>
    </ul>
  </div>
  <div class="circle" id="dial3">
    <h1>
      <span class="char1">-</span>
      <span class="char2">c</span>
      <span class="char3">o</span>
      <span class="char4">m</span>
      <span class="char5">p</span>
      <span class="char6">o</span>
      <span class="char7">s</span>
      <span class="char8">e</span>
      <span class="char9">r</span>
      <span class="char10">s</span>
      <span class="char11">-</span>
    </h1>
    <ul>
      <li class="item1">bach</li>
      <li class="item2">beethoven</li>
      <li class="item3">brahms</li>
      <li class="item4">chopin</li>
      <li class="item5">debussy</li>
      <li class="item6">elgar</li>
      <li class="item7">faure</li>
      <li class="item8">gershwin</li>
      <li class="item9">handel</li>
      <li class="item10">j strauss i</li>
      <li class="item11">liszt</li>
      <li class="item12">mozart</li>
      <li class="item13">offenbach</li>
      <li class="item14">bach</li>
      <li class="item15">beethoven</li>
      <li class="item16">brahms</li>
      <li class="item17">chopin</li>
      <li class="item18">debussy</li>
      <li class="item19">elgar</li>
      <li class="item20">faure</li>
      <li class="item21">gershwin</li>
      <li class="item22">handel</li>
      <li class="item23">j strauss i</li>
      <li class="item24">liszt</li>
      <li class="item25">mozart</li>
      <li class="item26">nnnn</li>
      <li class="item27">oooo</li>
      <li class="item28">pppp</li>
      <li class="item29">qqqq</li>
      <li class="item30">rrrr</li>
      <li class="item31">ssss</li>
      <li class="item32">tttt</li>
    </ul>
  </div>
  <div class="circle halfangle" id="dial4">
    <h1>
      <span class="char1">-</span>
      <span class="char2">g</span>
      <span class="char3">e</span>
      <span class="char4">n</span>
      <span class="char5">r</span>
      <span class="char6">e</span>
      <span class="char7">s</span>
      <span class="char8">-</span>
    </h1>
    <ul>
      <li class="item1">rock</li>
      <li class="item2">pop</li>
      <li class="item3">jazz</li>
      <li class="item4">classic</li>
      <li class="item5">ethnic</li>
      <li class="item6">reggae</li>
      <li class="item7">hip hop</li>
      <li class="item8">rock</li>
      <li class="item9">pop</li>
      <li class="item10">jazz</li>
      <li class="item11">classic</li>
      <li class="item12">ethnic</li>
      <li class="item13">reggae</li>
      <li class="item14">metal</li>
      <li class="item15">folk</li>
      <li class="item16">indie</li>
    </ul>
  </div>
  <div class="circle quarterangle" id="dial5">
    <!--<h1>
      <span class="char1">f</span>
      <span class="char2">i</span>
      <span class="char3">v</span>
      <span class="char4">e</span>
    </h1>-->
    <ul>
      <li class="item1">historic</li>
      <li class="item2">recommended</li>
      <li class="item3">modern</li>
    </ul>
  </div>
  <!-- <div id="selector"> </div> -->
</div>
<div class="player">- V O X T O K  P L A Y E R -</div>

style.css

body {margin:0 auto; background:#701A2C; font-family: monospace; color:#fff;}
.container { width: 100%; height: 100%; position: absolute; left:-480px;}
.circle {
  border-radius:100%;
  width:1000px;
  height:1000px;
  position:absolute;
  box-shadow: 10px 10px 10px 3px rgba(0,0,0,0.15);
}
.circle h1 {font-weight:normal;}
#one { box-shadow:none; }
#two {
  width:800px;
  height:800px;
  background:#AA0832;
  top:100px;
  left:100px;
}
#three {
  width:600px;
  height:600px;
  background:#BE0539;
  top:200px;
  left:200px;
}
#four {
  width:400px;
  height:400px;
  background:#E50147;
  top:300px;
  left:300px;
}
#five {
  width:200px;
  height:200px;
  background:#430D1A;
  top:400px;
  left:400px;
}
.circle h1 {
  height: 1000px;
  position: relative;
  margin:0;
  padding:0;
}
.circle h1 span {
  height:1000px;
  position:absolute;
  padding-top:5px;
  left: 500px;
  top: 0;
  -webkit-transform-origin: center center;
}
.circle#two h1 span {
  height:800px;
  left: 400px;
}
.circle#three h1 span {
  height:600px;
  left: 300px;
}
.circle#four h1 span {
  height:400px;
  left: 200px;
}
.circle#five h1 span {
  height:200px;
  left: 100px;
}
.char1 { transform: rotate(36deg); }
.char2 { transform: rotate(42deg); }
.char3 { transform: rotate(48deg); }
.char4 { transform: rotate(54deg); }
.char5 { transform: rotate(60deg); }
/*@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))*/
.circle ul {
  position:absolute;
  top:0;
  margin:0;
  padding:0;
}
.circle li {
  position:absolute;
  display:block;
  height:20px;
  width:75px;
  margin:0;
  list-style:none;
  -webkit-transform-origin: center center;
}
.circle#one ul {
  height:1000px;
  width:1000px;
}
.circle#one li {
  top:490px;
  padding:0 20px 0 905px;
}
.circle#two ul {
  height:800px;
  width:800px;
}
.circle#two li {
  top:390px;
  padding:0 20px 0 705px;
}
.circle#three ul {
  height:600px;
  width:600px;
}
.circle#three li {
  top:290px;
  padding:0 20px 0 505px;
}
.circle#four ul {
  height:400px;
  width:400px;
}
.circle#four li {
  top:190px;
  padding:0 20px 0 305px;
}
.circle#five ul {
  height:200px;
  width:200px;
}
.circle#five li {
  top:90px;
  padding:0 20px 0 105px;
}

.item1 { transform: rotate(-30deg);}
.item2 { transform: rotate(-20deg);}
.item3 { transform: rotate(-10deg);}
.item4 { transform: rotate(0deg);}
/*@for $i from 1 through 100 
  .item#{$i} 
    +transform(rotate(((-40 + ($i*10))+deg))*/

#selector {
  position:absolute;
  display:block;
  top:480px;
  left:490px;
  height:30px;
  width:510px;
  border: 3px solid white;
  border-radius: 5px;
  /*transform: perspective( 100px ) rotateY( -5deg );*/
}
.player { height:100px; background:#030303; background-image: linear-gradient(#37322E, #030303); padding: 0 0 0 20px; }

style.scss

$diameter: 1500;
$radius: $diameter / 2;
$circlecount: 5;
$rim: ($radius/$circlecount);
$offset: $rim/$circlecount;
$black: #000;
$white: #fff;
$dial-bg-colors: transparent #AA0832 #BE0539 #E50147 #430D1A; // one colour for the bg of each dial - outer to inner
$longestheading: 9+2;
$items: 32;
@mixin transform-origin($pos) {
  -webkit-transform-origin: $pos;
     -moz-transform-origin: $pos;
      -ms-transform-origin: $pos;
          transform-origin: $pos;
}

body {
  margin:0 auto;
  background:#701A2C;
  font-family: monospace;
  text-transform: uppercase;
  color:$white;
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left:-($radius - $offset) +px;
  top:-($offset * 2) +px;
}
.circle {
  border-radius: 100%;
  position: absolute;
  box-shadow: 10px 10px 10px 3px rgba(0,0,0,0.15);
  &:hover {
    /* transform: rotate(11.25deg); */
  }
  h1 {
    /*height: $diameter +px;*/
    position: relative;
    margin:0;
    padding:0;
    font-weight:normal;
    font-size: 1.4em;
    color: $black;
    span {
      position: absolute;
      padding-top: 5px;
      @include transform-origin(center center);
    }
  }
  ul {
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    li {
      position:absolute;
      display:block;
      /* height:$offset +px; */
      width:($rim - $offset) +px;
      margin:0;
      list-style:none;
      @include transform-origin(center center);
      padding-right:($offset - 20) +px;
      word-wrap: break-word;
    }
  }
}

#dial1 {
  box-shadow:none;
}
@for $i from 1 through $circlecount {
  $thisdialcirc: ($diameter * (1 - (($i - 1) / $circlecount)));
  $thisdialtop: (($thisdialcirc/2)-10);
  $thisoffset: (($diameter - $thisdialcirc) / 2);
  #dial#{$i} {
    width:$thisdialcirc +px;
    height:$thisdialcirc +px;
    top:$thisoffset +px;
    left:$thisoffset +px;
    background: nth($dial-bg-colors, $i);
  }
  #dial#{$i} h1 span {
    height: $thisdialcirc +px;
    left: $thisdialtop +px;
  }
  .circle#dial#{$i} ul { 
    height: $thisdialcirc +px;
    width: $thisdialcirc +px;
    li {
      top: $thisdialtop +px;
      padding-left:($thisdialcirc - $rim + 20) +px;
    }
 }
}
@for $i from 1 through $longestheading {
  .char#{$i} { transform: rotate((($i*6)+20)+deg); }
}
@for $i from 1 through $items {
  .item#{$i} { transform: rotate((-11.25 + ($i*11.25))+deg); }
}
@for $i from 1 through $items {
  .halfangle .item#{$i} { transform: rotate((-22.5 + ($i*22.5))+deg); }
}
@for $i from 1 through $items {
  .quarterangle .item#{$i} { transform: rotate((-45 + ($i*45))+deg); }
}

#selector {
  position:absolute;
  display:block;
  top:480px;
  left:490px;
  height:30px;
  width:510px;
  border: 3px solid white;
  border-radius: 5px;
}
.player {
  height:100px;
  background:#030303;
  background-image: linear-gradient(#37322E, #030303);
}