cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              .tl-wrapper
  ul.timeline
    li(data-year="1981").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1988").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1989").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!
          
    li(data-year="1990").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!
          
    li(data-year="1991").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1992").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1993").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1994").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1995").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1996").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1997").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1998").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="1999").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2000").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2001").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2002").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2003").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2004").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2005").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2006").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2007").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!

    li(data-year="2008").tl-item
      .tl-image
        img(src=" http://placehold.it/1650x1000/")
      .tl-copy
        h3.title
          | Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth&hellip;liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No&hellip; It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth&hellip;liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!
            
          
!
            
              // Colors
$bg: #289ecb;
$line: #b2e9ff;
$wrapper: #e4f0f4;

//Transition
$t1: .6s ease;

%clearfix {
  content: "";
  display: table;
  clear: both;
}

html {
  font-family: 'Oxygen', sans-serif;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

// Images will always fit the height of the timeline
img {
  width: auto;
  height: auto;
  max-height: 100%;
}

h3 {
  font-size: 40px;
  margin-top: 0;
  font-weight: 300;
}

/*** The timeline styles and structure ***/
.tl-wrapper {
  background: $wrapper;
  min-height: 1px;
  position: relative;
}

.timeline {
  position: relative;
  width: 100%;
  min-height: 1px;

  list-style: none;
  margin: 0;
  padding: 0;
  li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    &:after {
      @extend %clearfix;
    }
  }
}

/*** The items ***/
.tl-item {
  visibility: hidden;
  overflow: hidden;
  z-index: 0;
  .tl-copy {
    transition: $t1;
    //opacity: 0;
    transform: translate3d(60%,0,0);
  }
  .tl-image {
    transition: $t1;
    //opacity: .5;
    transform: translate3d(0,-100%,0);
  }
}

.tl-item.tl-active {
  visibility: visible;
  z-index: 10;
  .tl-copy {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  .tl-image {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

// Image's container
.tl-image {
  float: left;
  width: 70%;
  img {
    display: block;
  }
}

// Copy's styles
.tl-copy {
  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  
  padding: 16px;
  padding: 1rem;
  background: $bg;
  color: #fff;
  &:after {
    content: "";
    position: absolute;
    bottom: 30px;
    left: -19px;
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 20px 21px 0;
    border-color: transparent $bg transparent transparent;
  }
}

/*** The arrows for the items ***/
.tl-items-arrow-left,
.tl-items-arrow-right {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 40px;
  top: 50%;
  margin-top: -40px;
  z-index: 100;
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 28px;
    height: 2px;
    background: #fff;
  }
}
.tl-items-arrow-left {
  left: 0;
  &:before {
    top: 0;
    transform-origin: top right;
    transform: rotate(-45deg);
  }
  &:after {
    bottom: 0;
    transform-origin: bottom right;
    transform: rotate(45deg);
  }
}
.tl-items-arrow-right {
  right: 0;
  &:before {
    top: 0;
    transform-origin: top left;
    transform: rotate(45deg);
  }
  &:after {
    bottom: 0;
    transform-origin: bottom left;
    transform: rotate(-45deg);
  }
}

/*** The nav's styles ***/
.tl-nav-wrapper {
  position: absolute;
  bottom: 10px;
  left: 0;
  margin: 0;
  padding: 16px 0 0 0;
  
  border-top: 1px solid $line;
  overflow-x: hidden;
  width: 100%;
  &:before,
  &:after {
    content: "";
    width: 38px;
    height: 86px;
    position: absolute;
    top: 17px;
    
    background: $wrapper;
    z-index: 50;
  }
  &:before { left: 0; }
  &:after { right: 0; }
}

.no-csstransforms .tl-nav-wrapper {
  overflow-x: auto;
}

.tl-nav {
  list-style: none;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed $bg;
  
  transition: all .4s ease;
  li {
    width: 70px;
    height: 70px;
    position: relative;
    
    float: left;
    cursor: pointer;
    margin-right: 1rem;
    
    font-size: 12px;
    text-align: center;
    div {
      width: 34px;
      height: 34px;
      margin: auto;
      
      background: $bg;
      color: #fff;
      padding-top: 9px;
      border-radius: 1000px;
      transition: $t1;
    }
    &:hover div,
    &.tl-active div{
      width: 70px;
      height: 70px;
      background: transparent;
      color: $bg;
      border: 1px solid $bg;
      font-size: 24px;
      padding-top: 19px;
    }
    &:before {
      content: "";
      width: 4px;
      height: 4px;
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -2px;
      
      background: $bg;
      border-radius: 1000px;
    }
  }
  &:after {
    @extend %clearfix;
  }
}

/*** The nav's nav styles ***/
.tl-nav-arrow-left,
.tl-nav-arrow-right {
  position: absolute;
  width: 12px;
  height: 20px;
  top: 50%;
  z-index: 100;
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 2px;
    background: $bg;
  }
}
.tl-nav-arrow-left {
  left: 9px;
  &:before {
    top: 0;
    transform-origin: top right;
    transform: rotate(-45deg);
  }
  &:after {
    bottom: 0;
    transform-origin: bottom right;
    transform: rotate(45deg);
  }
}
.tl-nav-arrow-right {
  right: 9px;
  &:before {
    top: 0;
    transform-origin: top left;
    transform: rotate(45deg);
  }
  &:after {
    bottom: 0;
    transform-origin: bottom left;
    transform: rotate(-45deg);
  }
}

.no-csstransforms .tl-nav-arrow-left,
.no-csstransforms .tl-nav-arrow-right {
  display: none;
}
            
          
!
            
              /*** Detect the browser's prefixes ***/ 
if(document.addEventListener){ // Only IE9+ support this ;)
  // http://davidwalsh.name/vendor-prefix
  // Can't use it in IE8- as it brakes the page...
  var isPrefixed = (function () {
    var styles = window.getComputedStyle(document.documentElement, ''),
      pre = (Array.prototype.slice
        .call(styles)
        .join('') 
        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
      )[1],
      dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
      dom: dom,
      lowercase: pre,
      css: '-' + pre + '-',
      js: pre[0].toUpperCase() + pre.substr(1)
    };
  })();

  // Deals with prefixes
  var prefix = isPrefixed.css;

} else {
  var prefix = "";
}

/*** Slides ***/
var currentSlide = 0,
    totalSlides  = $(".tl-item").length - 1;

// Creates the navigation
$(".timeline").after("<div class='tl-nav-wrapper'><ul class='tl-nav'></ul></div><a href='#' class='tl-items-arrow-left'></a><a href='#' class='tl-items-arrow-right'></a>");
$( ".tl-copy" ).wrapInner( "<div class='tl-copy-inner'></div>");

// Cicle through items and creates the nav
$(".tl-item").each(function(i) {
  var year = $(".tl-item:eq(" + i + ")" ).data("year");
  $(".tl-nav").append("<li><div>" + year + "</div></li>");
  
  // Click handlers
  $(".tl-nav li:eq(" + i + ")").click(function() {
    if(!$(".tl-item:eq(" + i + ")" ).hasClass("tl-active")) {
      // Activates the item
      $(".tl-item").removeClass("tl-active");
      $(".tl-item:eq(" + i + ")" ).addClass("tl-active");
      currentSlide = i;

      // Activates the item nav
      $(".tl-nav li").removeClass("tl-active");
      $(".tl-nav li:eq(" + i + ")" ).addClass("tl-active");
    }
  });
});

// Activates the first slide
$(".tl-item:first, .tl-nav li:first").addClass("tl-active");

// Slide's arrows click handlers
$(".tl-items-arrow-left").on("click", function(){
  if(currentSlide > 0) {
    currentSlide--;
  
    // Activates the previous item
    $(".tl-item").removeClass("tl-active");
    $(".tl-item:eq(" + currentSlide +")").addClass("tl-active");
    
    // Activates the previous item nav
    $(".tl-nav li").removeClass("tl-active");
    $(".tl-nav li:eq(" + currentSlide + ")" ).addClass("tl-active");
  }
});

$(".tl-items-arrow-right").on("click", function(){
  if(currentSlide < totalSlides) {
    currentSlide++;
  
    // Activates the next item
    $(".tl-item").removeClass("tl-active");
    $(".tl-item:eq(" + currentSlide +")").addClass("tl-active");
    
    // Activates the next item nav
    $(".tl-nav li").removeClass("tl-active");
    $(".tl-nav li:eq(" + currentSlide + ")" ).addClass("tl-active");
  }
});
  
/*** Nav ***/
// The nav's width
var navWidth = ($(".tl-nav li").outerWidth(true) * $(".tl-nav li").length) + 36;
$(".tl-nav").width(navWidth);

// The nav's arrows
$(".tl-nav-wrapper").append("<a href='#' class='tl-nav-arrow-left'></a><a href='#' class='tl-nav-arrow-right'></a>");

/*** The timeline's height ***/
var vpHeight  = $(window).height();
var tlHeight = vpHeight - $(".tl-nav-wrapper").outerHeight(true) - 26;
$(".tl-wrapper").height(vpHeight);
$(".tl-item").css("max-height", tlHeight);
$(".tl-item").height(tlHeight);

/*** Nav's navigation... ***/
var navTranslation = 0;
var navLimit = (navWidth - $(".tl-nav-wrapper").outerWidth(true) + 20) * -1;

// To the left
$(".tl-nav-arrow-left").on("click", function() {
  if(navTranslation < 0) {
    navTranslation = navTranslation + 86;
    $(".tl-nav").css(prefix + "transform", "translateX(" + navTranslation + "px)");
  }
});

// To the right
$(".tl-nav-arrow-right").on("click", function() {
  if(navTranslation >= navLimit) {
    navTranslation = navTranslation - 86;
    $(".tl-nav").css(prefix + "transform", "translateX(" + navTranslation + "px)");
  }
});
            
          
!
999px
Loading ..................

Console