jQuery

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

February 3, 2017

Timelinyはレスポンシブでインタラクティブなタイムラインを作成するためのjQueryプラグイン。

CDN

<!-- 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>

Including files

<!-- 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>

Usage

<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() {}
    });
});

Basic demo

<!-- 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

Demo/Download