Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Timeline шаблонизатор на основе CSS3
DEMO +
С открытием в 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://ucodes.ru/platform/mobile/img/3.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://ucodes.ru/platform/mobile/img/2.png) 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://ucodes.ru/platform/mobile/img/2.png);
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');
});


Демо: Перейти
Демо с нашего сайта: Перейти

Также вы можете дописать стили и не использовать изображения. Данный пример обычный набросок, реализовать его можно разными путями. Кому как уж удобнее. При копировании материала указывайте источник uCodes.ru
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Скачать файл 1.9 Kb
Поделиться новостью в социальной сети.
Имя файла:
Размер: 1.9 Kb
Добавил: Best_Studio
Дата добавления: 09.01.2015 в 21:25 по МСК
Категория: Другие модули
Скачиваний: 331
Просмотров: 1115
Комментариев: 0
Эмоций:
Теги: ucoz, feyssmesh, js, html, css, timeline
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]