<section>
<div class="container">
<h1 class="text-center">From Start to Finish with ACME Software</h1>
<div class="timeline flex-container">
<div class="timeline-item flex-items-default selected">
<div class="timeline-content text-left animated bounceIn">
<h2>Explore</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
<div class="hexagon"></div>
<i class="material-icons">explore</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>Plan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
<div class="hexagon"></div>
<i class="material-icons">border_style</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>Production</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
<div class="hexagon"></div>
<i class="material-icons">format_shapes</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>Review</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
<div class="hexagon"></div>
<i class="material-icons">rate_review</i>
</div>
</div>
<div class="timeline-item flex-items-default">
<div class="timeline-content text-left">
<h2>Ship</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
<div class="hexagon"></div>
<i class="material-icons">important_devices</i>
</div>
</div>
<div class="dropdown animated bounceIn" style="left: -88px;">
<div class="inner">
<div class="arrow-down"></div>
</div>
</div>
</div>
</div>
</section>
$white: rgba(255, 255, 255, 1);
$black: rgba(38, 38, 38, 1);
$lightGray: rgba(245, 239, 237, 1);
$gray: rgba(213, 223, 229, 1);
$lightBlue: rgba(86, 203, 249, 1);
$blue: rgba(28, 119, 195, 1);
body {
background-color: $lightGray;
}
section {
height: 600px;
background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
h1 {
margin-top: 50px;
margin-bottom: 350px;
color: $white;
}
}
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
}
h2 {
font-family: 'Roboto', sans-serif;
}
.timeline {
width: 100%;
position: relative;
perspective: 5000px;
&:before {
position: absolute;
content: "";
width: 100%;
height: 15px;
background-color: $gray;
border-radius: 15px;
top: 76px;
}
.timeline-item {
text-align: center;
position: relative;
z-index: 1;
cursor: pointer;
&:hover {
&:after {
transform: scale(1.5, 1.5);
}
}
&.selected {
&:after {
background-color: $blue;
border: 5px solid $lightBlue;
transform: scale(1.5, 1.5);
}
}
&:after {
width: 30px;
height: 30px;
position: absolute;
top: 69px;
left: 50%;
margin-left: -15px;
background-color: $lightGray;
border: 5px solid $gray;
content: "";
border-radius: 50%;
transition: transform .5s ease;
}
.timeline-content {
position: absolute;
top: -300px;
display: none;
width: 350px;
left: -60px;
cursor: auto;
&.fadeIn {
animation-delay: .2s;
}
&.animated {
display: block;
}
}
}
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.flex-items-default {
width: 224px;
height: 150px;
}
.dropdown {
width: 400px;
height: 326px;
background: $white;
box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
position: absolute;
top: -310px;
// display: none;
animation-duration: .2s;
transition: left .3s ease;
.inner {
position: relative;
width: 100%;
height: 326px;
.arrow-down {
position: absolute;
bottom: -19px;
left: 50%;
margin-left: -20px;
}
}
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid $white;
}
.animated {
display: block;
}
.material-icons {
position: absolute;
top: 189px;
left: 160px;
width: 100%;
color: $white;
font-size: 33px;
}
.hexagon {
position: relative;
width: 75px;
height: 43.30px;
background-color: $blue;
margin: 21.65px 0;
left: 50%;
margin-left: -37px;
top: 25px;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 37.5px solid transparent;
border-right: 37.5px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 21.65px solid $blue;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 21.65px solid $blue;
}
View Compiled
// Globals
var prefixes = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var $container = $('.container');
var $timeline = $('.timeline');
var $timelineItem = $('.timeline-item');
var $timelineContent = $('.timeline-content');
var $dropDown = $('.dropdown');
var $hasHovered = true;
var hideOnExit = false;
// mouseenter event handler
$timelineItem.on('mouseenter', function(e) {
var isSelected = $(this).hasClass('selected');
if ( isSelected === false ) {
var leftPos = $(this).position().left,
left = leftPos - 88,
$that = $(this);
$timelineItem.removeClass('selected');
$(this).addClass('selected');
if ( $hasHovered === false ) {
// Show Bounce
// Set Flag
$hasHovered = true;
// Show DD Bounce
showBounce(left);
// Show DD content Bounce
showContentBounce($that);
} else {
// Follow
// Change pos of DD to follow
dropDownFollow(left);
// Hide previous dd content
$timelineContent.removeClass('animated fadeIn bounceIn');
// Show hovered dd content
$that.find($timelineContent).addClass('animated fadeIn');
}
}
});
// mouseleave event handler
$timeline.on('mouseleave', function(e) {
if (hideOnExit) {
// Set Flag
$hasHovered = false;
// Hide DD
hideDropDown();
// Hide DD content
$timelineContent.removeClass('animated fadeIn');
}
});
// Animation end event listener
$dropDown.on(prefixes, function(e) {
if ( e.originalEvent.animationName === 'fadeOut' ) {
$dropDown.removeAttr('style');
}
});
/**
* Private functions that do showing/hiding/animating
*/
function showContentBounce(that) {
$hasBounced = true;
that.find('.timeline-content').addClass('animated bounceIn');
}
function showBounce(pos) {
$dropDown.css('left', pos + 'px').removeClass('fadeOut').addClass('animated bounceIn');
}
function dropDownFollow(pos) {
$dropDown.css('left', pos + 'px');
}
function hideDropDown() {
$timelineItem.removeClass('selected');
$dropDown.removeClass('bounceIn').addClass('fadeOut');
}