Полноэкранное слайдшоу на CSS3

Полноэкранное слайдшоу на CSS3

2012-01-2116242
Здесь Вы можете увидеть анимированное слайдшоу, созданное с использованием только CSS3. Следует отметить то, что слайдшоу не будет работать в браузерах, не поддерживающих CSS анимацию. Естественно, самой хорошей платформой для проверки будет Google Chrome, ну, или же браузер Safari.

Слайдшоу будет помещено в определенный блок с абсолютным позиционированием, ширина и высота по 100%. На поверхность картинок натянута пиксельная сетка, которая обеспечивает затемнение, сетка создается с помощью маленького изображения 4x4px.

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

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


Комментарии (2)
Гость 2012-01-21 в 14:09Спам
Глюканутое
-1
Губка Томми 2012-01-21 в 15:07Спам
Написал же, для Chrome и Safari. Остальные браузеры инвалидские
0
Чтобы оставить комментарий или отзыв под этой публикацией,
зарегистрируйтесь или войдите.