Автор

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;
}

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Продолжаем рассматривать интересные фишки, которые можно достичь с помощью CSS. В Данном уроке мы рассмотрим весьма интересный, на мой взгляд, эффект движущихся объектов, а именно шестереночного механизма с помощью правил CSS3. Эффект достаточно красиво смотрится, плавно работает, и представляет собой картину полноценного механизма из задействованных деталек различной величины. Эффект весьма специфичный и не каждому веб-мастеру станет полезным, но при правильном применении станет весомым атрибутом дизайна..


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close