Эффект плавного изменения одного изображения на другое. Как?

Question

[Nikita Titov]

Всем привет, нашёл один сайт, который понравился мне своим хэдером.

Я не силён в js, пока что. Умею пока только вставлять его на сайт, изменять, но не писать собственный js-код.

Может быть вы видели какой-нибудь готовый js, который позволяет менять изображения на всю ширину и высоту одной секции как на сайте?

И вы, вероятнее всего, заметили, что когда меняются картинки, они плавненько, почти незаметно двигаются? Как можно добиться такого эффекта? Может тоже есть готовенький js?

Знаю, прошу многого, но может кому-нибудь не будет трудно поделиться?

Answer 1

[Алексей Ostin]

Вашу задачу нужно разделить на 3:
1) отображение картинок в одной секции
2) переключение между ними по какому-то событию
3) анимация переключения

1. Отображение картинок в одной секции
Запихнуть несколько картинок в один блок можно разными способами. Я предпочитаю следующий:

• создается контейнер нужного размера
  
• внутри размещаются контейнеры для изображений, которые позиционируются абсолютно относительно основного. Таким образом, они получаются такого же размера, как и основной, и размещаются друг под другом.
  
• С помощью свойства background-size: cover устанавливаются необходимые изображения в качестве фона во внутренних контейнерах. Это даст нам автоматически масштабированные и подрезанные изображения по размеру контейнеров.
  

Таким образом, мы имеем несколько слоев с фоновыми картинками.

2. Переключение между картинками
Тут все достаточно просто. Скрываем по умолчанию все, отображаем одну с помощью дополнительного класса.
А дальше используем наш любимый js, чтобы управлять дополнительным классом.

Имеем галерею такой структуры:

<div class="gallery">
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>         
</div>

По клику на галерею будем (с помощью jQuery):

1. получать активный элемент
   
2. получать следующий за ним. Если следующего нет - переходить к первому
   
3. у активного класс убирать, следующему добавлять
   

$('.gallery').click(function() {
    var $this = $(this);
    
    var $active = $this.find('.slide.active');    
    var $next   = $active.next();
    if (!$next.length) {
        $next = $this.find('.slide:first');
    }
    
    $active.removeClass('active');
    $next.addClass('active');
});

3. Анимация
Анимацию можно сделать как с помощью JS, так и с помощью CSS.

CSS:

• устанавливаем для активного контейнера прозрачность 1 (непрозрачный)
  
• устанавливаем для остальных прозрачность 0 (абсолютно прозрачный)
  
• задаем анимацию для переключения между этими режимами с помощью transition
  

.gallery .slide {
    opacity: 0;
    transition: opacity 1s;
}

.gallery .slide.active {
    opacity: 1;
}

В итоге получаем Fiddle
Ну и одна из самых популярных jQuery-библиотек для галерей с кучей разных эффектов: www.jssor.com