floating tabs

index.html

<section class="page">
	<section>
		<ul class="tabs-controls">
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link tabs-controls__link--active" data-id="1">
					Tab A
				</a>
			</li>
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link" data-id="2">
					Tab B
			  </a>
			</li>
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link" data-id="3">
					Tab C
				</a>
			</li>
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link" data-id="4">
					Tab D
				</a>
			</li>
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link" data-id="5">
					Tab E
				</a>
			</li>
			<li class="tabs-controls__item">
				<a href="#" class="tabs-controls__link" data-id="6">
					Tab F
				</a>
			</li>
		</ul>
	</section>
	<section class="cards-container">
		<div class="card card--current" id="1">
			<h1>A. Lorem ipsum dolor sit amet</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.
			</p>
		</div>
		<div class="card" id="2">
			<h1>B. Elit, sed do eiusmod</h1>
			<p>
				Elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.
			</p>
		</div>
		<div class="card" id="3">
			<h1>C. Consectetur adipisicing elit</h1>
			<p>
				Consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.
			</p>
		</div>
		<div class="card" id="4">
			<h1>D. Sed do eiusmod</h1>
			<p>
				Sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrcaecat cupidatat nonv proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</div>
		<div class="card" id="5">
			<h1>E. Ut enim ad minim veniam</h1>
			<p>
				Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in vo cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</div>
		<div class="card" id="6">
			<h1>F. Labore et dolore magna aliqua</h1>
			<p>
				Labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in volupest laborum.
			</p>
		</div>
	</section>
</section>

script.js

$(document).ready(function() {
	var oldId = null;

	$('.tabs-controls__link').click(function(e) {
		e.preventDefault();

		if ($(this).hasClass('tabs-controls__link--active')) {
			return false;
		}

		var currentId = parseInt($(this).data('id'), 10);
		$('.tabs-controls__link--active').removeClass('tabs-controls__link--active');
		$(this).addClass('tabs-controls__link--active');

		if (currentId < oldId) { // item is hidden
			var timing = $('.card.hidden').length * 100;
			$('.card').each(function(index) {
				if (index > (currentId - 1 ) || index == (currentId - 1)) {
					window.setTimeout(function() {
						$('.card').eq(index).removeClass('hidden');
					}, timing - (index * 100));
				}
			});
		} else {
			$('.card').each(function(index) {
				if (index < (currentId - 1)) {
					window.setTimeout(function() {
						$('.card').eq(index).addClass('hidden');
					}, index * 100);
				}
			});
		}

		oldId = currentId;
	});
});

style.scss

$itemsCount: 6; // Adjust if tabs number changes
// Fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

// General
body {
  background: #282828;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
  color: #282828;
}

// Layout
.page {
  width: 100vw;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

// Tabs
.tabs-controls {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 50px 0 100px;
  list-style-type: none;
}

.tabs-controls__link {
  position: relative;
  display: block;
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 700;
  color: #ebdbb2;
  text-transform: uppercase;
  text-decoration: none;

  &:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 0;
    height: 4px;
    background-color: #ebdbb2;
    border-radius: 2px;
    margin: auto;
    content: '';
    transition: width 0.4s;
  }
}

.tabs-controls__link--active {
  &:after {
    width: 100%;
  }
}

// Cards
.cards-container {
  position: relative;
  z-index: 1;
  width: 500px;
  height: calc(100vh - 205px);
  margin: 0 auto;
}

.card {
  position: absolute;
  width: 500px;
  height: 300px;
  background-color: #ebdbb2;
  border: 1px solid #282828;
  box-shadow: 9px 11px 3px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 40px;

  transition: transform 0.3s, opacity 0.2s;

  &.hidden {
    z-index: 100;
    background-color: #ebdbb2;
    color: #ebdbb2;
    opacity: 0;

    transition: color 0.5s, background-color 0.5s, transform 1s, opacity 0.2s 0.4s;

    h1 {
      color: #282828;

      transition: color 0.5s
    }

    @for $i from 1 through $itemsCount {
      &:nth-of-type(#{$i}) {
        transform: rotate(random(100) - 100 + deg) translateX((random(1) + 100) * 1%) translateY(random(60) * -1%) scale(random(10)*0.1) skewX(random(12) + deg) skewY(random(12) + deg);
      }
    }
  }

  @for $i from 1 through $itemsCount {
    $zIndexStartValue: $itemsCount + 1; // we don't want an item with 0 index
    $xValue: ($i - 1) * 10px; // we want to start translating from 0
    $yValue: ($i - 1) * 10px; // we want to start translating from 0
    $zIndexValue: $itemsCount - $i; // reverse the z-index, so first item is on top

    &:nth-of-type(#{$i}) {
      z-index: $zIndexValue;
      transform: translateX(#{$xValue}) translateY(#{$yValue});
    }
  }
}