Современный дизайн сайтов стал весьма прагматичным, появились новые возможности для реализации задумок на сайте. В последнее время стал весьма популярный среди разработчиков эффект параллакса, это не удивительно, мы сами уделяем ему много уроков и статьей по созданию эффектов на нем, ведь эта тенденция современного дизайна. Заказчики так и просят создавать сайты с применением такого эффекта, но что делать если у Вас уже готовый дизайн, но вы хотели добавить какой-нибудь эффект параллакса к себе на сайт.
Представляю универсальный автоматический слайдер, который будет содержать не только текст, картинки но и видео-материалы. В данном уроке мы рассмотрим как создать такой слайдер. И так приступим.
Шаг 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>