Автор

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

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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close