Dynamic Timeline is a refreshing approach to timelines that Creates visually pleasing horizontal or vertical timelines. Chronological or not, it's great to show off a portfolio etc.

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: common.tritoncode.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type='text/css' href='//common.tritoncode.com/script/timeline/timeline.css' />
<script src='//common.tritoncode.com/script/vendor/jquery/jquery-1.10.2.min.js'></script>
<script src='//common.tritoncode.com/script/timeline/timeline.js'></script>

2. HTML

you can set data attributes on the timeline container. Vertical timeline uses the prefix tl. 

<div class="timeline" data-tl-autoinit><div>

3. JAVASCRIPT

$(function(){
    $('.timeline').timeline(opt);
});

4. OPTIONS

var option = {
        background: "white",
        color: "inherit",
        linecolor: "rgba(0, 0, 0, 0.3)",
        datecolor: "inherit",
        dateposition: "absolute",
        fadeIn: true,
        fadeLine: true,
        fadeImages: true
};

5. DATA ATTRIBUTES

You can set data attributes on a time line or one of its children using easily readable seperated parameters as seen below.

<div class='timeline' data-tl-background='rgba(150, 150, 150, 0.5)'></div>

On the other hand you can set all of them using JSON. Bare in mind the JSON has to be properly formatted!

<div class='timeline' data-tl='{"background": "rgba(150, 150, 150, 0.5)"}'></div>

6. UPDATE THE TIMELINE

Most options are updated on scroll, such as background color and line color. However, there are certain propertoes that have to be manually updated.

var tl = $('.timeline').timeline(); tl.update()