Snippio

Resposnvie Horizontal Timeline

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <section> <div class="container"> <h1 class="text-center">snippio.com</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> <style> body { background-color: rgba(245, 239, 237, 1); } 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); } section h1 { margin-top: 50px; margin-bottom: 350px; color: rgba(255, 255, 255, 1); } p { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; } h2 { font-family: 'Roboto', sans-serif; } .timeline { width: 100%; position: relative; perspective: 5000px; } .timeline:before { position: absolute; content: ""; width: 100%; height: 15px; background-color: rgba(213, 223, 229, 1); border-radius: 15px; top: 76px; } .timeline .timeline-item { text-align: center; position: relative; z-index: 1; cursor: pointer; } .timeline .timeline-item:hover:after { transform: scale(1.5, 1.5); } .timeline .timeline-item.selected:after { background-color: rgba(28, 119, 195, 1); border: 5px solid rgba(86, 203, 249, 1); transform: scale(1.5, 1.5); } .timeline .timeline-item:after { width: 30px; height: 30px; position: absolute; top: 69px; left: 50%; margin-left: -15px; background-color: rgba(245, 239, 237, 1); border: 5px solid rgba(213, 223, 229, 1); content: ""; border-radius: 50%; transition: transform 0.5s ease; } .timeline .timeline-item .timeline-content { position: absolute; top: -300px; display: none; width: 350px; left: -60px; cursor: auto; } .timeline .timeline-item .timeline-content.fadeIn { animation-delay: 0.2s; } .timeline .timeline-item .timeline-content.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: rgba(255, 255, 255, 1); box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1); border-radius: 5px; position: absolute; top: -310px; animation-duration: 0.2s; transition: left 0.3s ease; } .dropdown .inner { position: relative; width: 100%; height: 326px; } .dropdown .inner .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 rgba(255, 255, 255, 1); } .animated { display: block; } .material-icons { position: absolute; top: 189px; left: 160px; width: 100%; color: rgba(255, 255, 255, 1); font-size: 33px; } .hexagon { position: relative; width: 75px; height: 43.3px; background-color: rgba(28, 119, 195, 1); 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 rgba(28, 119, 195, 1); } .hexagon:after { top: 100%; width: 0; border-top: 21.65px solid rgba(28, 119, 195, 1); } </style> <script> // 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'); } </script>

Preview