[html]
<style>
.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.spinner, .spinner__won {
  position: relative;
  overflow-x: hidden;
  background-color: white;
  box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
}

.spinner {
  max-width: 610px;
  min-width: 610px;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.spinner__won {
  max-width: 590px;
  min-width: 590px;
  padding: 3px 10px;
  font-size: 24px;
  letter-spacing: 12px;
}

.spinner-items {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-left: -246px;
}

.spinner__marker {
  position: absolute;
  height: 100%;
  width: 3px;
  background-color: yellow;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
}

.spinner-items__item {
  display: block;
  list-style-type: none;
  padding: 32px 0;
  font-size: 32px;
  color: #c2c2c2;
  border-left: 5px solid black;
  width: 117px;
  max-width: 117px;
  overflow: hidden;
  text-align: center;
}

.button3 {
  padding: 21px 46px;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  background-color: white;
  transition: box-shadow 300ms ease;
}

.button3:hover {
  box-shadow: 0px 2.5px 3.5px -1px rgba(0, 0, 0, 0.2);
}

.win {
  background-color: lemonchiffon;
}
</style>
<script>
/*
 * Emoji Spinner inspired by CS:GO Case Opening
 *
 * I know, the code's a mess. I hope in a few years I'll look back at this and laugh.
 * But for now, I'm actually proud of this monster.
 * 
 * With a bit of front-end sprinkles it ain't that bad!
 *
 * If you're re-using this code. Please refer this as your source.
 * Give credit where it's due. With a comment in the code for example. 
 */

class SpinnerAnimation {
    constructor({container, list}) {
      this.tickSound = new Audio("h-ttps://freesound.org/data/previews/269/269026_5094889-lq.mp3");
      this.tickSound.playbackRate = 4;
      
      this.winSound = new Audio("h-ttps://freesound.org/data/previews/511/511484_6890478-lq.mp3");
      
      this.firstRound = true;

      this.reset();

      this.spinnerContainer = document.getElementById(container);
      this.spinnerList = spinnerContainer.children.namedItem(list);
      this.spinnerMarker = spinnerContainer.children.namedItem("spinnerMarker");
      this.spinnerItems = this.spinnerList.children;
      this.spinnerWon = document.getElementById("spinnerWon");
    }
  
    reset() {
        this.started = false;
        this.stopped = false;
        this.stopAnimation = false;
        this.lowerSpeed = 0;
        this.ticks = 0;
        this.offSet = 0;
        this.recycle = false;
        this.tick = false;
        this.state = null;
        this.speed = 0;
        this.winningItem = 0;
        this.firstRound = false;
    }

    start(speed = 1200) {
        this.started = true;
        this.speed = speed;
        console.log(this.speed);
        this.loop();
    }

    loop() {
        let dt = 0; // Delta Time is the amount of time between two frames
        let last = 0; // Last time of frame

        // The Animation Loop
        function loop(ms) {

            if(this.recycle) {
                this.recycle = false;
                const item = spinnerList.firstElementChild;
                spinnerList.append(item);
            }

            if(this.tick) {
                this.tick = false;
                this.tickSound.play();
            }

            this.offSet += this.speed * dt;

            const ct = ms / 1000; // MS == The amount of Milliseconds the animation is already going for. Divided by 1000 is the amount of seconds
            dt = ct - last;
            last = ct;

            // Move the item to the left
            this.spinnerList.style.right = this.offSet + "px";
          
            if(this.offSet >= 122 ) {
                this.recycle = true;
                this.offSet = 0;
                this.tick = true;
                this.ticks += 1;
                if(this.ticks >= 20 && (Math.random() * 10) >= 5) {
                    this.stop();
                }
            }

            if(this.stopped) {
                let stopped = false;
                if(!stopped) this.speed -= this.lowerSpeed;

                if(this.speed <= 0) {
                    stopped = true;
                    this.speed = 0;
                }

                if(stopped) {
                    if(this.offSet >= 58.6) {
                        this.offSet += 6;
                    } else {
                        this.offSet -= 6;
                    }

                    if(this.offSet >= 122 || this.offSet <= 0) {
                        this.stopAnimation = true;
                        
                        this.winSound.play();
                      
                        if(this.offSet >= 122) {
                          this.winningItem = 5;
                          this.spinnerItems.item(5).classList.add("win");
                          this.spinnerWon.innerText += this.spinnerItems.item(5).innerText;
                          this.offSet = 122;
                        }
                        
                        if(this.offSet <= 0) {
                          this.winningItem = 4;
                          this.spinnerItems.item(4).classList.add("win");
                          this.spinnerWon.innerText += this.spinnerItems.item(4).innerText;
                          this.offSet = 0;
                        }
                      
                    }
                  
                }
            }

            if(!this.stopAnimation) {
                requestAnimationFrame(loop);
            }
        }

        // Bind Class to loop function
        loop = loop.bind(this);
        requestAnimationFrame(loop);
    }

    stop() {
        this.stopped = true;

        // Calculate a random lower speed
        this.lowerSpeed = Math.ceil(Math.random() * 10) + 1;
    }
}

const startSpinnerBtn = document.getElementById("startSpinner");

const animation = new SpinnerAnimation({
    container: "spinnerContainer",
    list: "spinnerList"
});

startSpinnerBtn.addEventListener("click", (e) => {
    if(animation.started == "ready") { return; }
  
    if(!animation.firstRound) animation.spinnerItems.item(animation.winningItem).classList.remove("win");
    animation.reset();
    animation.start();
});
</script>
<div class="container">
  <div class="spinner" id="spinnerContainer">
    <ul class="spinner-items" id="spinnerList">
      <li class="spinner-items__item" id="8">🐶</li>
      <li class="spinner-items__item" id="9">🐷</li>
      <li class="spinner-items__item" id="1">🐸</li>
      <li class="spinner-items__item" id="2">🐹</li>
      <li class="spinner-items__item" id="3">🐵</li>
      <li class="spinner-items__item" id="4">🐰</li>
      <li class="spinner-items__item" id="5">🐭</li>
      <li class="spinner-items__item" id="6">🐮</li>
      <li class="spinner-items__item" id="7">🐨</li>
    </ul>
    <div class="spinner__marker" id="spinnerMarker"> </div>
  </div>
  <div class="spinner__won" id="spinnerWon"></div>
  <div class="button3" id="startSpinner">Spin Emoji!</div>
</div>
[/html]

    
[html]
<style>
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: fontawesome;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  opacity: 0.8;
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-1:before { content: '\f087'; } /* 's' */
.icon-address:before { content: '\f02c'; } /* 'l' */
.icon-down-circled:before { content: '\f01a'; } /* 'f' */
.icon-down-open:before { content: '\f055'; } /* 'd' */
.icon-up-open:before { content: '\f0c6'; } /* 'p' */
.icon-graduation-cap:before { content: '\f072'; } /* 'e' */
.icon-user:before { content: '\f19c'; } /* 'u' */
.icon-briefcase:before { content: '\f169'; } /* 'b' */

* {
	 -webkit-box-sizing: border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body > header {
	width:100%;
	position:fixed;
	z-index:30;
	background:#E0DCD9;
	border-bottom:1px solid #d5d1cf;
	box-shadow:0 1px 1px white;
	top:0;
	left:0;
}

body > header nav {
	width:760px;
	margin:0 auto;
	overflow:hidden;
}
body > header nav ul {
	margin:0 0 0 -65px;
	padding:0;
	text-align:center;
	font-size: 0em;
    letter-spacing: 0px;
    word-spacing: 0px;
}
body > header nav li {
	display:inline-block;
	cursor:pointer;
	border-left:1px solid #ebe7e4;
	border-top:1px solid #E0DCD9;
	box-shadow:-1px 0px 1px #d5d1cf;
	padding:;
	font-size:18px;
}
body > header nav li:hover {
	background:#d5d1cf;
}
body > header nav li:first-child {
	border-left:1px solid #E0DCD9;
	box-shadow:-1px 0px 1px #E0DCD9;
	text-shadow:1px 1px 1px #fff;
}
body > header nav li:active,body > header nav li.active {
	color:white;
}
body > header nav li.all:active,body > header nav li.all.active {
	text-shadow:1px 1px 1px #444;
}
body > header nav li.icon-address:active,body > header nav li.icon-address.active {
	background:#0ED1E7;
	border-left:1px solid #0cb4c6;
	border-top:1px solid #0cb4c6;
	box-shadow:none;
}
body > header nav li.icon-graduation-cap:active,body > header nav li.icon-graduation-cap.active {
	background:#EB2690;
	border-left:1px solid #bf1f75;
	border-top:1px solid #bf1f75;
	box-shadow:none;
}
body > header nav li.icon-briefcase:active,body > header nav li.icon-briefcase.active {
	background:#E76B0E;
	border-left:1px solid #B85307;
	border-top:1px solid #B85307;
	box-shadow:none;
}
body > header nav li.icon-star-1:active,body > header nav li.icon-star-1.active {
	background:#5E6297;
	border-left:1px solid #333;
	border-top:1px solid #333;
	box-shadow:none;
}
body > header nav li.icon-user:active,body > header nav li.icon-user.active {
	background:#454545;
	border-left:1px solid #333;
	border-top:1px solid #333;
	box-shadow:none;
}
body > header nav ul#nav_ctrl {
	position:absolute;
	top:0;
	right:0;
}
	
div#timeline_container {
	width:760px;
	margin:40px auto;
	position:relative;
}
div#timeline_container header {
	position:relative;
	z-index:20;
}
div#timeline_container header figure {
	width:600px;
	height:100px;
	border-radius:;
	border:5px solid #cdc9c6;
	overflow:hidden;
	display:block;
	margin:0 auto;
}
div#timeline_container header figure img {
	width:100%;           
}
div#timeline_container header h1 {
	position:absolute;
	top:20px;
	right:80px;
	font-family: 'Lobster', cursive;
	font-size:2.8em;
	text-shadow:2px 2px 1px #fff;
	font-weight:normal;
}
div#timeline_container > ul {
	position:relative;
	width:4px;
	background:#cdc9c6;
	border-right:1px solid white;
	margin:0 140px;
	padding:6em 0 0;
	list-style:none;          
}
div#timeline_container > ul:after {
	content:"";
	width:15px;
	height:15px;
	border-radius:50%;
	background:#cdc9c6;
	box-shadow:1px 1px 1px white;
	position:absolute;
	bottom:0;
	left:-6px;
}
div#timeline_container > ul > li {
	position:relative;
	padding:.3em 0;
	min-height:130px;
	cursor:pointer;
	
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
div#timeline_container > ul > li.hidden {
	position:absolute;
	top:-500px;
}
div#timeline_container > ul > li div {
	position:absolute;
}
div#timeline_container > ul li > div.event_icn {
	padding:0.3em;
	font-size:1.7em;
	border-radius:50%;
	background:#ebe7e4;
	border:3px solid #cdc9c6;
	margin-left:-22px;
	color:rgba(85,86,86,0.3);
	box-shadow:1px 1px 1px white;

	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#bde3e7;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#0ED1E7}

div#timeline_container > ul > li.education_event div.event_icn { background:#eb98c5}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#EB2690}

div#timeline_container > ul > li.work_event div.event_icn { background:#e7b793}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#E76B0E}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
	background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}


div#timeline_container > ul > li div.event_content {
	width:480px;
	padding:1em 2em 1.3em;
	border:1px solid #DDDBDA;
	border-radius:10px;
	top:-2em;
	opacity:0.3;
	background:white;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
        left: 57px;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
	opacity:1;
}

div#timeline_container > ul > li div.event_content:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: -20px;
margin-top: 8px;
background: #cdc9c6;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
z-index: -5;
}

div#timeline_container > ul > li div.event_content h2 {
	margin:0.3em 0;
	padding:0;
	text-transform:capitalize;
	font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
	margin:0;
	padding:0;
	line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}

div#timeline_container > ul > li div.event_content ul {
	margin:0;
	padding:0;
	list-style:none;
	line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
	top:1em;
	text-align:left;
	font-size:1.2em;
	text-shadow:1px 1px 1px white;
	opacity:0.3;
	font-weight:bold;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
margin-left: -170px;
display: block;
width: 120px;
}
div#timeline_container > ul > li div.event_date a {
	margin:0;
	padding:0;
	line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}


div#instructions_container {
	position:fixed;
	padding:2em;
	width:300px;
	bottom:2em;
	right:2em;
	line-height:1.4em;
	background:#FDFDBD;
	border-radius:10px;
	border:1px solid #DDDBDA;
	z-index:40;
	font-size:0.9em;
	color:black;
	line-height:1.6em;
}
div#info_container{
	position:fixed;
	bottom:2em;
	right:2em;
	border-radius:50%;
	color:#ebe7e4;
	background:#6d6b6a;
	opacity:0.3;
	cursor:pointer;
	width:22px;
	font-size:14px;
	height:22px;
	padding-top:2px;
	text-align:center;
	font-family:'lobster','cursive';
	display:none;
}

</style>
<script>
$('nav ul#main_nav').on('click','li',function(){
	var $type=$(this).attr('data-title');
	$('nav ul#main_nav li').removeClass('active')
	if ($type=='all') {
    $('nav ul#main_nav li').addClass('active');
    $('div#timeline_container >ul> li').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li')[0]).addClass('active');
	} else {
    $(this).addClass('active');
    $('div#timeline_container >ul> li').addClass('hidden');	
    $('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
	}
    	
});

$(document).on('scroll',function(){
	$('div#instructions_container').fadeOut('fast');
	$('div#info_container').fadeIn('fast');
});
$(document).on('click','div#info_container',function(){
	$('div#instructions_container').fadeIn('fast');
	$('div#info_container').fadeOut('fast');
});

$(document).on('click','li.icon-down-open',function(){
	scrollToNext();
});

$(document).on('click','li.icon-up-open',function(){
	scrollToPrev();
});

$(document).on('keypress',function(e){
	if(e.which==106) {
    scrollToNext();
	} else if(e.which==107) {
    scrollToPrev();
	}
});

$('div#timeline_container').on('click','li', function(){
	showNext($(this));
});

function showNext(li){
	var $itms=$('div#timeline_container li');
	$itms.removeClass('active');
	$(li).addClass('active');
	$('html,body').stop().animate({ scrollTop: $(li).offset().top-$(li).height()}, 500,function(){
    $('html,body').stop();
	});
}

function scrollToNext() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));
	
	if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current+1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
	} else {
    $('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
	}
}
function scrollToPrev() {
	var $itms=$('div#timeline_container > ul > li');
	var $current=$itms.index($('div#timeline_container li.active'));
	
	if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current-1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
	} else {
    $('html,body').stop().animate({ scrollTop: 0}, 500);
	}
}

</script>

<header>
	<nav>
    <ul id="main_nav">
    	<li class="active all" data-title="all" title="Весь список">All</li>
    	<li class="icon-address active" data-title="life" title="Настоящее"></li>
    	<li class="icon-graduation-cap active" data-title="education" title="Прошлое"></li>
    	<li class="icon-briefcase active" data-title="work" title="Альта"></li>
    	<li class="icon-user active" data-title="user" title="Незавершенное"></li>
    	
    </ul>
    <ul id="nav_ctrl">
    	<li class="icon-up-open" data-title="Next"></li>
    	<li class="icon-down-open" data-title="Previous"></li>
    </ul>
	</nav>
</header>

<div id="timeline_container">
	<header>
    <figure>
    	<img src="https://wallpaper.dog/large/20514532.jpg">
    </figure>
    <h1>Хронология <br/> персонажа такого-то</h1>
	</header>
	<ul>
    <li class="life_event active">
    	<div class="event_icn icon-address"></div>
    	<div class="event_content">
        <h2>001 Король-лягушонок или <a href="#">Железный Генрих</a></h2>
        <p>
        	В стародавние времена, когда заклятья ещё помогали, жил-был на свете король; все дочери были у него красавицы, но самая младшая была так прекрасна, что даже солнце, много видавшее на своем веку, и то удивлялось, сияя на её лице.

        </p>

    	</div>
    	<div class="event_date">
        25/07/99999
                        <a href="#">Persones</a>, <a href="">Persones</a>,<a href="">Persones</a>
    	</div>
    </li>

    <li class="life_event">
    	<div class="event_icn icon-address"></div>
    	<div class="event_content">
        <h2>002 Дружба кошки и мышки</h2>
        <p>
        	Кошка познакомилась с мышкой и столько пела ей про свою великую любовь и дружбу, что мышка наконец согласилась поселиться с нею в одном доме и завести общее хозяйство. "Да, вот к зиме нужно бы нам наготовить припасов, а не то голодать придется, - сказала кошка. - Ты, мышка, не можешь ведь всюду ходить. Того гляди, кончишь тем, что в мышеловку угодишь." 
        </p>
    	</div>
    	<div class="event_date">
        25/07/1995
    	</div>
    </li>

    <li class="education_event">
    	<div class="event_icn icon-graduation-cap"></div>
    	<div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        	На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    	</div>
    	<div class="event_date">
        01/09/1997
    	</div>
    </li>

    <li class="work_event">
    	<div class="event_icn icon-briefcase"></div>
    	<div class="event_content">
        <h2>004 Сказка о том, кто ходил страху учиться</h2>
        <p>
        	Один отец жил с двумя сыновьями. Старший был умен, сметлив, и всякое дело у него спорилось в руках, а младший был глуп, непонятлив и ничему научиться не мог.<br>
Люди говорили, глядя на него: "С этим отец еще не оберется хлопот!" Когда нужно было сделать что-нибудь, все должен был один старший работать; но зато он был робок, и когда его отец за чем-нибудь посылал позднею порой, особливо ночью, и если к тому же дорога проходила мимо кладбища или иного страшного места, он отвечал: "Ах, нет, батюшка, не пойду я туда! Уж очень боязно мне." 
        </p>
    	</div>
    	<div class="event_date">
        07/2000 - 07/2003
    	</div>
    </li>
	
	<li class="user_event">
    	<div class="event_icn icon-user"></div>
    	<div class="event_content">
        <h2>005 Волк и семеро козлят</h2>
        <p>
        	Жила-была старая коза. Было у ней семеро козлят, и она их так любила, как может любить своих детей только мать. Раз собралась она идти в лес, корму принести; вот созвала она всех своих семерых деток и говорит:
        </p>
    	</div>
    	<div class="event_date">
Дата
    	</div>
    </li>


    <li class="education_event">
    	<div class="event_icn icon-graduation-cap"></div>
    	<div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        	На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    	</div>
    	<div class="event_date">
        01/09/1997
    	</div>
    </li>



	</ul>
</div>

<!-- of #timeline_container -->



[/html]