Автор

27 04.2013
Слайдер с эффектом параллакса на jQuery

Слайдер с эффектом параллакса на jQuery


 

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

 

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

 

Как всегда, мы начнем с разметки HTML, в каждом слайде размещается элемент h2, абзац и элемент div с изображением:

<div id="da-slider" class="da-slider">

 <div class="da-slide">
 <h2>Заголвок</h2>
 <p>Описание</p>
 <a href="#" class="da-link">Прочитать все</a>
 <div class="da-img">
 <img src="images/1.png" alt="image01" />
 </div>
 </div>

 <div class="da-slide">
 <!-- ... -->
 </div>

 <!-- ... -->

 <nav class="da-arrows">
 <span class="da-arrows-prev"></span>
 <span class="da-arrows-next"></span>
 </nav>

</div>

Ядром слайдера являются анимации каждого элемента. Контролировать повдение элементов можно с помощью классов направлений, устанавливаемых для слайда.

Например, когда слайд смещается вправо, он получить (с помощью JavaScript кода) класс “da-slide-toright”. Есть четыре возможных класса направлений.

.da-slide-fromright - при движении справа
.da-slide-fromleft - при движении слева
.da-slide-toright - при движении направо
.da-slide-toleft - при движении налево

 

Используя данные классы мы можем управлять анимациями каждого элемента:

/* Выскальзывание слайда справа */
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}

/* Параметры анимаций для разных элементов: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

Рассмотрим некоторые опции плагина jQuery. Эффект  параллакса создается смещением фона в направлении обратном движению слайда. Параметр bgincrement позволяет управлять эффектом.

$('#da-slider').cslider({

    current     : 0,
    // Индекс текущего слайда

    bgincrement : 50,
    // Увеличение положения фона
    // (эффект параллакса) при скольжении слайда

    autoplay    : false,
    // Включение/выключение слайдшоу

    interval    : 4000
    // Время показа слайда

});

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

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


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

06 06.2014
Слайдер с эффектом параллакса на jQuery

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


29 09.2014
Слайдер с эффектом параллакса на jQuery

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


19 03.2013
Слайдер с эффектом параллакса на jQuery

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


12 12.2015
Слайдер с эффектом параллакса на jQuery

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close