jQuery
【jQuery】タイムラインを作成するためのjQueryプラグインTimeliny
February 3, 2017

Timelinyはレスポンシブでインタラクティブなタイムラインを作成するためのjQueryプラグイン。
<!-- Before closing your <head> tag --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.timeliny/1.0.1/jquery.timeliny.min.css" /> <!-- Before closing your <body> tag --> <script src="https://cdn.jsdelivr.net/jquery.timeliny/1.0.1/jquery.timeliny.min.js"></script>
<!-- Before closing your <head> tag --> <link rel="stylesheet" href="jquery.timeliny.min.css" /> <!-- Before closing your <body> tag --> <script src="jquery.timeliny.min.js"></script>
<div id="example1"> <div data-year="2014" class="active">Short text here</div> <div data-year="2011">Short text here</div> <div data-year="2010">Short text here</div> </div>
$(function() { $('#example1').timeliny({ order: 'asc', className: 'timeliny', wrapper: '<div class="timeliny-wrapper"></div>', boundaries: 2, animationSpeed: 250, hideBlankYears: false, onInit: function() {}, onDestroy: function() {}, afterLoad: function(currYear) {}, onLeave: function(currYear, nextYear) {}, afterChange: function(currYear) {}, afterResize: function() {} }); });
<!-- Html --> <div id="demo1"> <div data-year="2013">Short text here</div> <div data-year="2011" class="active">Short text here</div> <div data-year="2010">Short text here</div> </div> /* Javascript */ $('#demo1').timeliny();
MIT