Места на сайте не бывает много, его необходимо экономить, и организовывать на сайте все таким образом, чтобы на сайте оставалось достаточно места, и взор пользователя не терялся в поисках информации. Некоторые сайты предлагаю просмотреть свои популярные статьи, или последние которые были добавлены на сайт, обычно это выводиться простым списком, под статьей, который не особо бросается в глаза. В данном уроке мы рассмотрим простой анимированный скроллер новостей сайта с помощью xml.
Скроллер позволит вам отображать последние новости, новинки продукции, объявления, события и многое другое в ограниченной области. Он также позволяет вам добавлять динамический контент в статичные страницы.
Для этого мы будем использовать vScroller – бесплатный скроллер новостей на XML, который отлично подойдет веб-сайтам и блогам. vScroller основан на jQuery и отображает контент в виде вертикальной скользящей ленты. Контент извлекается из стандартизированного XML-файла и оформляется за счет простого CSS3.
Шаг 1. XML
Для начала мы рассмотрим простую разметку, в которой мы будем размещать контейнеры с нашими новостями:
<?xml version="1.0" encoding="utf-8" ?>
<newslist title="ПОСЛЕДНИЕ НОВОСТИ:">
<news category="red" url="Ссылка" date="01-01-2011">
<headline>Заголовок</headline>
<detail>Описание</detail>
</news>
<news category="green" url="Ссылка" date="01-12-2011">
<headline>Заголовок</headline>
<detail>Описание </detail>
</news>
<news category="blue" url="Ссылка" date="01-22-2011">
<headline>Заголовок</headline>
<detail>Описание</detail>
</news>
<news category="yellow" url="Ссылка" date="01-24-2011">
<headline>Заголовок</headline>
<detail>Описание</detail>
</news>
</newslist>Основные функции:
* контент распределяется по категориям
* имеется поддержка более 4 различных категорий (можно разделять цветами: желтый, синий, красный, зеленый)
* настраиваемая скорость прокрутки
* отсутствие графических файлов / 100% код CSS
* кэширование в XML
* возможность настраивать время задержки контента перед переходом на следующий элемент
Шаг 2. CSS
Теперь мы определим параметры позиционирования нашего контейнера, его окантовку, и диапазон блоков с помощью наших стилей.
.news-wrapper
{
margin-top: 100px;
background-color: #333333;
background: url(../images/bg.jpg);
}
.news-wrapper .news-contents-wrapper
{
width: 400px;
margin: auto;
border-right: 1px dashed #6a6a6a;
border-left: 1px dashed #6a6a6a;
height: 350px;
}
.news-wrapper .news-contents
{
overflow: hidden;
position: relative;
z-index: 998;
height: 308px;
}
.news-wrapper .news
{
width: 100%;
height: 100px;
color: #6a6a6a;
position: absolute;
z-index: 999;
border-bottom: 1px dashed #6a6a6a;
}Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
