A Pen by CarterTsai.

index.html

<link href='http://fonts.googleapis.com/css?family=Chau+Philomene+One' rel='stylesheet' type='text/css'>

<div class="slider">
  <div class="bar">
      <ul>
        <li class='active'> <a href="#">1999</a> </li>
        <li> <a href="#">2000</a></li>
        <li> <a href="#">2011</a> </li>
        <li> <a href="#">2012</a> </li>
        <li> <a href="#">2013</a> </li>
      </ul>
  </div>
  <div class="content"></div>
</div>

my-Slider.markdown

my Slider

A Pen by CarterTsai on CodePen.

License.

style.scss

@import "compass";
body {
  margin: 0;
  padding: 0;
}

.slider {
  font-family: 'Chau Philomene One', sans-serif;
  width: 100%;
  height: 100%;
  background: #65c557;
  
   &:before, &:after {
      content:'';
      height: 20px;
      display:block;
   }
  
  .bar {
    width: 100%;
    color: #767676;
    background: #bf515c;
    height: 200px;
    
    /*li[class=active] > a{
        opacity: .9;
        font-size: 40px;
    }*/
    
    & a {
      position: relative;
      font-size: 35px;
      text-decoration: none;
      color:#ccc;
      top: 120px;
      left: 27%;
      float: left;
      margin-right: 30px;
      opacity: .4;
      transition: font-size 0.2s;
      line-height: 40px;
      
      &:hover {
       font-size: 45px;
       opacity: .9;
      }
    } 
  }
  .content {
    width: 100%;
    background: #4b5ab8;
    height: 350px;
    color: #000;
    font-size: 20px;
    line-height: 40px;
    
    & > div {
      display: none;
    }
    
    .show {
      display: block;
      padding-top: 30px;
      margin-left: 18%;
      margin-right: 18%;
    }
  }
}

// Data
$y1999: '=小子不長進，當樂聲低緩幽抑的時，已經財散人亡，橋梁是否有斷折，農民播種犁田，相忘於黑暗之中；前進！因為等它滴完，輕輕一扯，Sake鍋、水果魚、蒸鮮蝦、辣椒螃蟹都不賴，咖啡因是我合法的興奮劑，咖啡苦了一點，咖啡排骨，やすことドライブなう♪♪寺門ん家→門井ん家→小山ん家→川商→台中→台南';

$y2000: '股市也延後開盤；考英語聽力測驗的40分鐘內，看起來十分硬朗!要衝了嗎?父決定搬出台大宿舍，任何議題問名嘴，潮爽德，這個要打馬嗎？所以還在試著從影響中掙扎出來，這就是我們進步的方式，但很少有人來台灣招聘頂尖資深管理人才、國際等級商務領袖或是創新人才。';

$y2011: '  好眼熟的辣模，加油要快，血友病男童絕食，染料恐致癌，超人車窗外問路短片，漁業署今發出新聞稿表示，天哪.........!!!，這個要打馬嗎？喝過這麼多速溶咖啡，別人可以回答雀巢，明天瘋婆子咖啡星冰樂買一送一，早上喝著咖啡，地震發生時';

$y2012: '我不在場，比較困難，我們都要視作可敬的對手，據我瞭解，內政部也有聲音，是否能維持其新鮮度，甚至危亂，我只是說你不要誤解為從322之後股市上漲是為了慶祝你們執政成功，像五楊快速道路就花了八百多億元，當國內經濟隨著國際景氣上升，原來高雄縣赤山段不做了';

$y2013: '有些是給地方根據各地方特色，我們原來預想這個會期可能會很忙，我很坦白講……我沒有不認帳、我沒有不認帳，我們怎麼能夠要求每天統計的數字完全一樣，過去也有通例，價格都有下跌，我們從來沒有都講好的，雖然這個工法是大家可以選用的合格工法';

// Style
.show:after {
  content: $y1999;
  display: block;
  font-size: 25px; 
  left: 10px;
  top: 30px;
  width: 500px;
  height: 230px;
  margin-top: 212px;
  margin-left: 275px;
  color: #fff;
  position: absolute;
}

.bar li:hover a:after{
    display:inline-block;
    font-size: 25px; 
    left: 0px;
    top: 23px;
    width: 500px;
    height: 230px;
    margin-top: 80px;
    color: #fff;
    position: absolute;
    z-index: 6;
    animation-name: move_eye;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards
}

.bar li:nth-child(1):hover a:after {
    content: $y1999 ;
    margin-left: -10px;
}

.bar li:nth-child(2):hover a:after {
    content: $y2000 ;
    margin-left: -105px;
}

.bar li:nth-child(3):hover a:after {
    content: $y2011;
    margin-left: -205px;
}

.bar li:nth-child(4):hover a:after {
    content: $y2012;    
    margin-left: -300px;
}

.bar li:nth-child(5):hover a:after {
    content: $y2013;
    margin-left: -400px;
}


@keyframes move_eye { 
  0% { left:-600px; opacity: .1;} 
  50% { left:300px; opacity: .1;} 
  100% { left:0px; opacity: .9;} 
}