Автор

21 04.2013
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

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

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


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

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

Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto. Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания.


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

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close