jQuery

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

February 3, 2017
Timeliny

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