Multi Image Slider

Question

На странице Apple iMac есть удивительный слайдер.

Это стандартный слайдер изображений, но, похоже, он использует несколько изображений, которые появляются в разное время на одном слайде.

Кто-нибудь имеет ссылку на учебник, который объясняет, как это было сделано? Эффект имеет серьезный вау-фактор.

Вот ссылка: http://www.apple.com/imac/

Answer 1

AnythingSlider - самая близкая вещь, которую я нашел к слайдеру яблока. Он анимирует элементы каждого слайда независимо. Проверьте демо FX.

http://proloser.github.com/AnythingSlider/demos.html

Answer 2

Примечания к ползункам:

• Используйте систему плагинов. Есть много надежных. Если вы используете jQuery, я рекомендую плагин цикла . Это чрезвычайно настраиваемый.
• Все круги навигации внизу используют спрайт (означает одно изображение. ) Затем они используют background-position для одновременного отображения нужной части изображения.
• Используйте визуальные пробелы. Одна из причин, почему слайдер Apple выглядит так хорошо, заключается в том, что элементы не тесны. У них много места для дыхания.

Примечания к предыдущим / следующим изображениям:

• Поместите <a> сбоку и поместите фактическое содержимое в другой тег. Apple для этого использовала <b>. Я бы, наверное, использовал <span>. Используйте opacity, чтобы сделать его невидимым.
• Тег <a> должен охватывать большую область. Возможно, вы хотите, чтобы он был на 100% высоты контейнеров и был достаточно широким, чтобы мышь могла его найти.
• Внутренний тег содержит текст или изображение, которое вы будете отображать. Apple написал next для текста, но затем использует background-image и сдвигает текст вне экрана с помощью text-indent.
• Сделать внутреннюю метку видимой при наведении на <a>. Опять же, вы будете использовать opacity для этого.
• Использует переходы CSS3 для постепенного появления / исчезновения. Сделайте поиск в Google, чтобы узнать о них больше.
• Используйте JavaScript, чтобы определить, следует ли вообще показывать <a>. Это встроено во многие плагины для слайд-шоу. Если вы используете jQuery, я рекомендую цикл плагин .

---

/*this will fade only the opacity property in .25 seconds for both in and out */
-webkit-transition: .25s opacity ease-out;
-moz-transition: .25s opacity ease-out;
transition: .25s opacity ease-out;