qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

CSS3 слайдер с параллакс эффектом

CSS3 слайдер
Просмотров: 8574  Скачан: 737 раз  Комментариев в теме: 0

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

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

Шаг 1 - создание разметки

 

HTML

<div class="sp-slideshow">			
    <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
    <label for="button-1" class="button-label-1"></label>				
    <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
    <label for="button-2" class="button-label-2"></label>				
    <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
    <label for="button-3" class="button-label-3"></label>				
    <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
    <label for="button-4" class="button-label-4"></label>				
    <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
    <label for="button-5" class="button-label-5"></label>				
    <label for="button-1" class="sp-arrow sp-a1"></label>
    <label for="button-2" class="sp-arrow sp-a2"></label>
    <label for="button-3" class="sp-arrow sp-a3"></label>
    <label for="button-4" class="sp-arrow sp-a4"></label>
    <label for="button-5" class="sp-arrow sp-a5"></label>				
    <div class="sp-content">
        <div class="sp-parallax-bg"></div>
        <ul class="sp-slider clearfix">
            <li><img src="images/image1.png" alt="image01" /></li>
            <li><img src="images/image2.png" alt="image02" /></li>
            <li><img src="images/image3.png" alt="image03" /></li>
            <li><img src="images/image4.png" alt="image04" /></li>
            <li><img src="images/image5.png" alt="image05" /></li>
        </ul>
    </div>				
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
Материалы по теме:

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Таблица тарифных плановТаблица тарифных планов

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......
Интересные публикации:

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....
  • Текущий 2.05/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.1/5( Голосов 20 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить