Блог

так что это скорее вопрос любопытства, чем актуальный вопрос, поэтому, пожалуйста, потерпите меня. Я только что проверил :

http://www.apple.com/iphone/

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

Кроме того, есть ли простой способ создать это поведение без его жесткого кодирования, потому что это то, что я бы сделал прямо сейчас.

Вот объяснение: http://johnbhall.com/iphone-4s /

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

Вот рабочая демонстрация с исходным кодом.

В основном идея такова,

• предварительно загрузите все изображения

• есть таймер, который срабатывает каждые N секунд

• когда сработает таймер, запустите анимацию преобразования, которая вставит новое изображение.

Разработка идеи позволяет останавливать / отменять / приостанавливать / возобновлять, автоматически останавливаться после одного цикла и так далее.

Торговое название этого эффекта — «слайдер». итак, вы можете поискать слайдер в Google и найти много обсуждений. Есть слайдеры для jquery (nivoslider), есть один для mootools (slideitmoo), есть варианты без фреймворка (например, демонстрация scriptiny, которую я связал) и так далее.