Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

 

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

 

Шаг 1. HTML

Первым шагом будет подключение скриптов, все файлы надо разместить между тегами head и /head:

 <script type="text/javascript" src="paradigm-plugin/js/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="paradigm-plugin/js/jquery.cssAnimate.mini.js"></script>
 <script type="text/javascript" src="paradigm-plugin/js/jquery.waitforimages.js"></script>
 <script type="text/javascript" src="paradigm-plugin/js/jquery.touchwipe.min.js"></script>
 <script type="text/javascript" src="paradigm-plugin/js/jquery.themepunch.paradigm.js"></script>

Затем нам надо создать разметку, для каждого слайда мы будем использовать отдельный контейнер, в котором будет содержаться все изображения к определенному слайду, и подписи, к примеру приводим разметку одного контейнера:

 <li data-transition="fade"><img src="images/slides/slide1.jpg" data-thumb="images/thumbs/thumb1.jpg" data-thumb_bw="images/thumbs/thumb1_bw.jpg">
 <div class="creative_layer">
 <div class="caption_blue fadeup" style="top:170px;left:50px;">Добро пожаловать</div>
 <div class="caption_black smallcap faderight" style="top:213px;left:90px">Легко настраиваемый слайдер</div>
 </div>
 </li>

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

 

Шаг 2. CSS

Все стили слайдера находятся в файле setting.css, в нем мы указываем порядок размер изображений и миниатюр. Для начала мы создадим индикатор загрузки слайдера:

.paradigm-preloader{
 background:url(../assets/loader/preloader.gif) no-repeat;
 width:24px;
 height:24px;
 position:absolute;
 left:49%;
 top:49%;
 z-index:9999;
}

Затем нам необходимо указать параметры вывода цветных изображений, во время автоматической перемотки слайдера:

.light .paradigm_thumb_container{
 background:url(../assets/shadows/shadow_thumb_repeater.png) repeat-X;
 background-color:#e5e5e5;
}

После этого создаем правила для черно-белой версии:

.dark .paradigm_thumb_container{
 background:url(../assets/shadows/shadow_thumb_repeater.png) repeat-X;
 background-color:#1e1e1e;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

Фон слайдера задается при помощи таких простых правил:

.light .paradigm-bg{
 background-color:#fff;
 padding:9px;
 border:1px solid #e5e5e5;
}

.dark .paradigm-bg{
 background-color:#222;
 padding:9px;
 border:1px solid #1e1e1e;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

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

 

Шаг 3. jQuery

Данный слайдер весьма удобен, и поддерживает последние нововведения в дизайне и не только:

Анимация с помощью CSS с FallBack для JQuery.
Дополнительный эффект параллакса.
Неограниченное количество слайдов.
iPhone и Android сенсорное управление включено.
JQuery бесплатный плагин.
Настраиваемый 100% через плагин, Параметры / CSS / HTML.
Простая установка на вашем сайте.
Vimeo и Youtube Поддерживаемый.

 

Для активации планига нам необходимо разместить следующий фрагмент кода в файле index.html

<script type="text/javascript">

 $(document).ready(function() {
 $.noConflict();

 jQuery('#banner-example-1').paradigm(
 {
 width:900,
 height:300,

 thumbWidth:90,
 thumbHeight:50,
 thumbAmount:6,
 thumbSpaces:4,
 thumbPadding:4,

 shadow:'true',

 parallaxX:500,
 parallaxY:10,
 captionParallaxX:-40,
 captionParallaxY:2,

 touchenabled:'on',

 timer:5
 });

 jQuery('#banner-example-2').paradigm(
 {
 width:700,
 height:300,

 thumbWidth:120,
 thumbHeight:80,
 thumbAmount:5,
 thumbSpaces:0,
 thumbPadding:4,

 shadow:'true',

 parallaxX:0,
 parallaxY:0,
 captionParallaxX:0,
 captionParallaxY:0,

 touchenabled:'on',

 timer:0
 });

 });
 </script>

 

Вот и все. Готово!


vk.com/club.ssdru

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



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

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

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


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

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


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

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


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

Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт...


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close