LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Sortable Vertical Timeline

How use: Drag and drop any object in timeline and feel the experience :)

Item
Lorem ipsum dolor sit amet, consectetur adipisicing.
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Image
Lorem ipsum dolor sit amet, consectetur adipisicing.
Video
Item
Lorem ipsum dolor sit amet, consectetur adipisicing.
Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum inventore quas deserunt, reprehenderit est doloribus praesentium minima sequi repudiandae libero!

Item
Lorem ipsum dolor sit amet, consectetur adipisicing.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing.
CSS
@charset "UTF-8";
/*--------------------------------------------

Name:     Timeline
Created:  13/02/15
Author:   Raúl Hernández 
Github:   raulghm

----------------------------------------------*/
/*
Using BEM SuitCSS variant, see: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
*/
.cf:before, .Timeline-item:before, .Timeline-item-top:before,
.cf:after,
.Timeline-item:after,
.Timeline-item-top:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after, .Timeline-item:after, .Timeline-item-top:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf, .Timeline-item, .Timeline-item-top {
  *zoom: 1;
}

body {
  padding: 40px;
}

.title {
  text-align: center;
  margin-bottom: 60px;
  color: #777;
}
.title h2, .title h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.Timeline {
  width: 830px;
  margin: 0 auto;
  position: relative;
}
.Timeline-line {
  width: 40px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  padding-left: 20px;
  cursor: pointer;
}
.Timeline-line:after {
  content: "";
  position: absolute;
  border-left: 1px solid #dedede;
  height: 100%;
}
.Timeline-line.is-active .Timeline-line-menu {
  opacity: 1;
}
.Timeline.is-dragging .Timeline-item-inner {
  margin: 0;
  opacity: .7;
}
.Timeline-item {
  width: 100%;
  position: relative;
  z-index: 90;
}
.Timeline-item-inner {
  position: relative;
  margin-bottom: 40px;
  width: 345px;
  border: 1px solid #dedede;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  margin: -10px 0 -20px;
}
.Timeline-item-inner:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -78px;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #999;
  width: 12px;
  height: 12px;
}
.Timeline-item-inner:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  right: -9px;
  top: 50%;
  height: 0;
  width: 0;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #dedede;
  border-top: 8px solid transparent;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.Timeline-item:hover {
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.Timeline-item:hover:after {
  border-left-color: #999;
}
.Timeline-item:hover .Timeline-item-inner {
  border-color: #999;
}
.Timeline-item:hover .Timeline-item-inner:after {
  height: 0;
  width: 0;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #999;
  border-top: 8px solid transparent;
}
.Timeline-item:hover .Timeline-item-top-tools {
  opacity: 1;
}
.Timeline-item:nth-child(odd) {
  margin-left: 50%;
  padding-left: 70px;
  width: 50%;
}
.Timeline-item:nth-child(odd):hover .Timeline-item-inner:after {
  height: 0;
  width: 0;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #999;
  border-top: 8px solid transparent;
}
.Timeline-item:nth-child(odd) .Timeline-item-inner:before {
  right: auto;
  left: -77px;
}
.Timeline-item:nth-child(odd) .Timeline-item-inner:after {
  height: 0;
  width: 0;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #c9c9c9;
  border-top: 8px solid transparent;
  border-left: 0;
  right: auto;
  left: -9px;
}
.Timeline-item:nth-child(odd) .Timeline-item-index {
  opacity: .6;
  left: -45px;
  right: auto;
}
.Timeline-item.is-dropping {
  cursor: -webkit-grabbing;
}
.Timeline-item-index {
  position: absolute;
  right: -45px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #c9c9c9;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 200;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.Timeline-item--quote .Timeline-item-content {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.Timeline-item--image .Timeline-item-content-body img {
  max-width: 100%;
  margin-top: 5px;
}
.Timeline-item-top {
  background-color: #f8f8f8;
  padding: 10px 15px;
}
.Timeline-item-top:hover {
  cursor: move;
  cursor: -webkit-grab;
}
.Timeline-item-top-type {
  float: left;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-size: 1.1rem;
}
.Timeline-item-top-type i {
  font-size: 16px;
  font-size: 1.6rem;
}
.Timeline-item-top-type span {
  margin-left: 10px;
}
.Timeline-item-content {
  background-color: #fff;
  padding: 10px 20px 20px;
  text-align: left;
}
.Timeline-item-content-title {
  font-size: 18px;
  font-size: 1.8rem;
}
.Timeline-item-content-image {
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 135px;
  width: 341px;
  margin-top: 10px;
  margin-left: -20px;
}
.Timeline-item-content-body {
  position: relative;
}
.Timeline-item-content-body:empty {
  display: none;
}
JS
/* Sortable — is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap.
https://github.com/RubaXa/Sortable */

var $component = 'Timeline';

	function sort() {
		var $itemIndex = 0;

		console.log('reorder');
		
		$('.' + $component).find('.' + $component + '-item').each(function(index) {

			index++;
			$itemIndex = (index < 10) ? '0' + index : index;
			
			$(this).find('.' + $component + '-item-index').text($itemIndex);

			if (index % 2 === 0) {
        $(this).addClass('is-right');
      }
      else {
        $(this).removeClass('is-right');
      }

		});
	}

	$(document).ready(function(){
						 sort();

	 	var el = document.getElementById($component);
      var sortable = Sortable.create(el, {
        draggable: '.' + $component + "-item", 
        handle: '.' + $component + "-item-top",
        animation: 250,
        scroll: true, // or HTMLElement
        scrollSensitivity: 60, // px, how near the mouse must be to an edge to start scrolling.
        scrollSpeed: 10, // px
        ghostClass: "is-dropping",

        onStart: function (event) {
          $('.' + $component).toggleClass('is-dragging');
          console.log('onStart')
        },

        onEnd: function (event) {
          $('.' + $component).toggleClass('is-dragging');
          sort();
        },

      });
	});
Host Instantly Drag and Drop Website Builder

 

Description

Sortable JS library and SCSS + BEM
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID