Полноэкранное слайдшоу на CSS3
Здесь Вы можете увидеть анимированное слайдшоу, созданное с использованием только CSS3. Следует отметить то, что слайдшоу не будет работать в браузерах, не поддерживающих CSS анимацию. Естественно, самой хорошей платформой для проверки будет Google Chrome, ну, или же браузер Safari.
Слайдшоу будет помещено в определенный блок с абсолютным позиционированием, ширина и высота по 100%. На поверхность картинок натянута пиксельная сетка, которая обеспечивает затемнение, сетка создается с помощью маленького изображения 4x4px.
В так называемом полноэкранном слайдшоу весь проход от первого изображения до последнего длится 36 секунд, а изображений всего 6, т.е. по 6 секунд на просмотр одной картинки и для перехода. После этого пролета цикл повторяется.
Плавные переходы в представленном примере обеспечиваются не только затуханием или появлением, картинка одновременно увеличивается и немного поворачивается. Вы можете поэкспериментировать с CSS3 анимацией, чтобы сделать слайдшоу более изящным и оригинальным.
Слайдшоу будет помещено в определенный блок с абсолютным позиционированием, ширина и высота по 100%. На поверхность картинок натянута пиксельная сетка, которая обеспечивает затемнение, сетка создается с помощью маленького изображения 4x4px.
В так называемом полноэкранном слайдшоу весь проход от первого изображения до последнего длится 36 секунд, а изображений всего 6, т.е. по 6 секунд на просмотр одной картинки и для перехода. После этого пролета цикл повторяется.
Плавные переходы в представленном примере обеспечиваются не только затуханием или появлением, картинка одновременно увеличивается и немного поворачивается. Вы можете поэкспериментировать с CSS3 анимацией, чтобы сделать слайдшоу более изящным и оригинальным.
