Простое слайд-шоу средствами CSS3, без скриптов
827материалов
228тем на форуме
3004комментария
6161пользователь

Простое слайд-шоу средствами CSS3, без скриптов


Описание:

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

Установка:

В таблицу стилей вставляем код:
Код
@keyframes fade {
    0% { opacity: 0; }
    11.11% { opacity: 1; }
    33.33% { opacity: 1; }
    44.44% { opacity: 0; }
    100% { opacity: 0; }
}
.fadein { position:relative; height:312px; width:500px;}
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }

Html код слайдера:
Код
<div class="fadein">
    <img src="http://webmaster-ucoz.ru/_ph/1/2/647382444.jpg?1452531936">
    <img src="http://webmaster-ucoz.ru/_ph/1/2/120207662.jpg?1452532172">
    <img src="http://webmaster-ucoz.ru/_ph/1/2/183576989.jpg?1452532190">
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.01.2016 в 07:00
Материал просмотрен: 1729 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо

3 комментария


avatar
Скажите а можно туда ссылки поставить? Ну как ротатор баннеров сделать. Если да то помогите пизззз cyber
Ромчик
Это слайдер, для ротатор баннеров используйте системный ротатор http://f1.s.qip.ru/19yBhtbV3.png
avatar
Ну я немного не так выразился, имел ввиду слайдер.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта