Timeline шаблонизатор на основе CSS3
827материалов
228тем на форуме
3004комментария
6159пользователей

Timeline шаблонизатор на основе CSS3


С открытием в Facebook timeline многие стали делать нечто подобное, изрядно полазив на эту тему нактнулся на пост в habrahabr где был пример основанный jQuery и CSS а именно на плагине jQuery Masonry который убирает пустоту между блоков. Но данный вариант не особо подошел и решил написать такой вариант: 

И так: 

Создаем основу HTML: 
Код
<div id="ucodes-timeline">   
<li><i class="arrow"></i><div id="ucodes-still-block">Контент</div></li>   
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 2</div></li>   
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 3</div></li>   
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 4</div></li>   
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 5 Полный</div></li>   
</div>

Также напишем CSS распределения: 
Код
#ucodes-still-block {   
background: #fff;   
border-radius: 3px;   
border: 1px solid #c3cbdf;   
min-height: 60px;   
}   

#ucodes-timeline {   
background: url(http://webo4ka.3dn.ru/_ld/41/45469073.png) repeat-y center;   
}   
#ucodes-timeline > li {   
float: left;   
clear: left;   
width: calc(50% - 14px);   
margin-bottom: 15px;   
position: relative;   
list-style: none;   
}   
#ucodes-timeline > .right {   
float: right;   
clear: right;   
}   
#ucodes-timeline .arrow {   
background: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg) no-repeat;   
width: 20px;   
height: 15px;   
position: absolute;   
top: 20px;   
}   
#ucodes-timeline > .left + .right > .arrow {   
top: 35px;   
}   
#ucodes-timeline .right > .arrow {   
left: calc(0% - 18px);   
right: auto;   
background-position: -60px -28px;   
width: 19px;   
}   
#ucodes-timeline .left > .arrow {   
left: auto;   
right: calc(0% - 19px);   
background-position: -41px -28px;   
}   
#ucodes-timeline .highlight {   
clear: both;   
width: auto;   
float: none;   
}   
#ucodes-timeline .highlight .arrow {   
background-image: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg);   
background-position: -26px -28px;   
height: 21px;   
width: 15px;   
left: 50%;   
top: -20px !important;   
margin-left: -7px;   
}


Ну и на последок .js классификация: 
Код
$(function(){   
$('#ucodes-timeline li:even').addClass('left');   
$('#ucodes-timeline li:odd').addClass('right');   
$('#ucodes-timeline li:last').addClass('highlight');   
});

Также вы можете дописать стили и не использовать изображения. Данный пример обычный набросок, реализовать его можно разными путями. Кому как уж удобнее.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 18.01.2015 в 13:12
Материал просмотрен: 739 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта