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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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…liens!
        .tl-description
          p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console