Download Simple Animated Timeline Plugin For jQuery – Timelify

Timelify is a really simple jQuery plugin for creating a vertical timeline that animates events with the scroll event using Animate.css powered CSS3 animations.

How to use it:

1. Load the required animate.css and timelify.css in the html file.

2. Add your own events to the timeline following the markup structure like this:

view source

001	<div class="timeline">

002	<h2>2013</h2>

003	<ul class="timeline-items">

004	<li class="is-hidden timeline-item"> <!-- Normal block, positionned to the left -->

005	<h3>Title</h3>

006

<hr>

007	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cupiditate, delectus deserunt doloribus earum eveniet explicabo fuga iste magni maxime mollitia nemo neque, perferendis quod reprehenderit ut, vel veritatis voluptas?</p>

008

<hr>

009	<time>January 2013</time>

010

</li>

011

</ul>

012	<h2>2014</h2>

013	<ul class="timeline-items">

014	<li class="is-hidden timeline-item inverted"> <!-- Normal block, positionned to the right  -->

015	<h3>Title</h3>

016

<hr>

017	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aspernatur consequuntur culpa deserunt ea esse est inventore, ipsa laborum officia, quam quia quidem, rem sunt tempora tenetur ullam voluptatem.</p>

018	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolore harum iure quod ut! Accusamus aspernatur corporis est excepturi facere laudantium nesciunt nihil optio, quaerat quos rerum sunt suscipit voluptate?.</p>

019

<hr>

020	<time>Mars 2014</time>

021

</li>

022	<li class="is-hidden timeline-item centered"> <!-- Centered block, positionned in the middle -->

023	<h3>Title</h3>

024

<hr>

025	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, cupiditate dicta dignissimos dolorem doloribus ducimus eos error ex molestiae nobis odio odit optio placeat quasi repudiandae, unde velit voluptate voluptatem!

026

</p>

027	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consectetur cupiditate ea, eius excepturi expedita illum, incidunt ipsam iste modi obcaecati optio repellendus! Dolore dolores pariatur sint veniam voluptates!</p>

028	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur distinctio doloremque eos eum eveniet fuga molestiae mollitia nesciunt nisi nobis nostrum, odio omnis pariatur praesentium quibusdam sequi sint voluptates.</p>

029	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam, aspernatur commodi consequuntur corporis dicta, distinctio enim eos expedita, id iste laborum maxime nesciunt quaerat sed temporibus veniam vero voluptatem.</p>

030

<p><a

031	href="http://gamejolt.com/games/slender-the-cursed-forest/30950">Link</a>

032

</p>

033

<hr>

034	<time>Date</time>

035

</li>

036

037

</ul>

038	<h2>2015</h2>

039	<ul class="timeline-items">

040	<li class="is-hidden timeline-item">

041	<h3>Title</h3>

042

<hr>

043	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur blanditiis dolorem, eos excepturi impedit neque nisi recusandae repudiandae tempora. Ad debitis ducimus est et explicabo, id in nam necessitatibus?</p>

044

045	<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam, culpa eveniet excepturi fugiat, harum laborum laudantium magni nemo nihil officia possimus quaerat quas quod sapiente sit tempora vel? Veritatis.</span></p>

046

<hr>

047	<time>Date</time>

048

</li>

049	<li class="is-hidden timeline-item inverted">

050	<h3>Title</h3>

051

<hr>

052	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos inventore labore maiores mollitia neque nesciunt nulla obcaecati vel velit! Aut, maxime minima? Eos est laborum non optio quidem ut!</p>

053

054	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem distinctio fugit, harum id magnam perferendis porro sint vel voluptate voluptatibus! Ad adipisci deleniti ea nisi, placeat ratione saepe sunt veritatis.</p>

055

<hr>

056	<time>Date</time>

057

</li>

058

059

060

</ul>

061	<h2>2016</h2>

062	<ul class="timeline-items">

063	<li class="is-hidden timeline-item">

064	<h3>Title</h3>

065

<hr>

066	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsum magnam quis vero vitae. Adipisci at doloribus eius expedita id, nobis officiis perferendis quae sint ut. Consectetur nostrum obcaecati veritatis!</p>

067

068	<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. Aliquam asperiores, cum deserunt dicta est facere fuga fugiat laboriosam perspiciatis quae quia ratione rem. Aspernatur earum, est et facilis nobis repudiandae.</p>

069

<hr>

070	<time>Date</time>

071

</li>

072	<li class= source : jqueryscript.net Share this: Facebook Tweet WhatsApp Related posts: Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js Free Download Powerful Calendar Plugin With jQuery – Calendar.js