Автор

06 06.2013
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

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

Красивые эффекты заполонили сердца веб-мастеров, с выходом jQuery сайтостроение изменилось в корни, появились новые возможности, стали появляться различные плагины, подключив которые можно достичь невиданные ранее эффекты. Буквально на каждом сайте можно найти различные изображения, которые оформлены достаточно просто без всяких эффектов. В данном уроке мы рассмотрим как скрасить изображения и не только применив интересный плагин для разворота. PFold является очень экспериментальным jQuery плагином.


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

Наверное каждый веб мастер сталкивался с проблемой как оформить на своем сайте или на сайте клиента кнопки «поделиться» от известных социальных сетей, при этом не используя сторонних сервисов. Хочу продемонстрировать очень, на мой взгляд интересное решение.


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

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.


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

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close