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

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

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

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

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

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

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