Автор

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

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

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


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

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


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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close