Автор

Cкроллер новостей для сайта с помощью XML

Cкроллер новостей для сайта с помощью XML


 

Места на сайте не бывает много, его необходимо экономить, и организовывать на сайте все таким образом, чтобы на сайте оставалось достаточно места, и взор пользователя не терялся в поисках информации. Некоторые сайты предлагаю просмотреть свои популярные статьи, или последние которые были добавлены на сайт, обычно это выводиться простым списком, под статьей, который не особо бросается в глаза. В данном уроке мы рассмотрим простой анимированный скроллер новостей сайта с помощью 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;
}

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Cкроллер новостей для сайта с помощью XML

В последнее время чаще встречаются 3d эффекты на сайте, это не удивительно, ведь это позволяет создать иллюзию объемности на ресурсе, при этом это положительно сказывается на посетителях, ведь уникальный пользователь всегда рад чему-то новенькому и интересному, которое можно потрогать самому и посмотреть это в действии. В данном уроке мы рассмотрим как создать эффект переворота изображений, как в книжке, для слайдера изображений и не только. Так как практически все браузеры поддерживают трансформации, то данный эффект станет отличным дополнением..


Cкроллер новостей для сайта с помощью XML

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


Cкроллер новостей для сайта с помощью XML

Все чаще я замечаю использования видео для фона сайта, дизайнеров уже не смущает такой нюанс как весомость сайта, с современным интернетом такой вопрос уже не стоит остро, по этому дизайнеры разрешают себе фантазировать в любых направлениях, не является и исключением "живые" фоны сайта, а именно использование видео в качестве фона. В данном уроке мы рассмотрим один из замечательных примеров реализации фонового видео в виде морской глубины с помощью небольших манипуляций HTML5.


Cкроллер новостей для сайта с помощью XML

Представляю вашему вниманию 4 интересных шаблона для сайта (скоро открытие сайта).


75 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close