Все для веб-дизайнера
Paradigm слайдер для с эффектом параллакса
Современный дизайн сайтов стал весьма прагматичным, появились новые возможности для реализации задумок на сайте. В последнее время стал весьма популярный среди разработчиков эффект параллакса, это не удивительно, мы сами уделяем ему много уроков и статьей по созданию эффектов на нем, ведь эта тенденция современного дизайна. Заказчики так и просят создавать сайты с применением такого эффекта, но что делать если у Вас уже готовый дизайн, но вы хотели добавить какой-нибудь эффект параллакса к себе на сайт.
К примеру универсальный автоматический слайдер, который будет содержать не только текст, картинки но и видео-материалы. В данном уроке мы рассмотрим как создать такой слайдер. И так приступим.
Шаг 1. HTML
Первым шагом будет подключение скриптов, все файлы надо разместить между тегами head и /head:
|
1 2 3 4 5 |
<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> |
Затем нам надо создать разметку, для каждого слайда мы будем использовать отдельный контейнер, в котором будет содержаться все изображения к определенному слайду, и подписи, к примеру приводим разметку одного контейнера:
|
1 2 3 4 5 6 |
<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, в нем мы указываем порядок размер изображений и миниатюр. Для начала мы создадим индикатор загрузки слайдера:
|
1 2 3 4 5 6 7 8 9 |
.paradigm-preloader{ background:url(../assets/loader/preloader.gif) no-repeat; width:24px; height:24px; position:absolute; left:49%; top:49%; z-index:9999; } |
Затем нам необходимо указать параметры вывода цветных изображений, во время автоматической перемотки слайдера:
|
1 2 3 4 |
.light .paradigm_thumb_container{ background:url(../assets/shadows/shadow_thumb_repeater.png) repeat-X; background-color:#e5e5e5; } |
После этого создаем правила для черно-белой версии:
|
1 2 3 4 5 6 7 |
.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; } |
Фон слайдера задается при помощи таких простых правил:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<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> |
Вот и все. Готово!
Интересно:
| Опубликовал admin 18.07.2012 в 17:53, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...