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


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

908
10 из 10
Проголосовало: 7






С открытием в 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');  
});


Также вы можете дописать стили и не использовать изображения. Данный пример обычный набросок, реализовать его можно разными путями. Кому как уж удобнее.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://ucodes.ru/
  • Всего комментариев: 1

Marishka
0
Marishka написал: Написано 16 Января 2015 в 17:38
Комментарий №1
Оставьте предложения к версии 2.. Либо примеры к модулям, желательно в skype: SPAMMRAC

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: