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

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

21.01.201215872tommy

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

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

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

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



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