Слайдер для фото с анимацией


слайдер для фото с анимацией


Слайдер для фото с анимацией без  jquery,а с использованием чекбоксов простой,но тем не менее стильный и не тормозящий загрузку сайта.Добавить фото в блог не сложно,но красиво оформить и подать посетителю это уже совсем другая тема.Установив слайдер для ротации фотографий можно не только сэкономить место,но и увеличить юзабилети страницы убрав излишнюю на громождённость.Это наверное самый простой вариант установки слайдера для фото на страницы блога или сайта




Установка кода слайдера для фото.


Код слайдера-ротатора состоит из двух частей и так как адрес фото уже непосредственно следует вносить в код CSS,то значит можно взять и добавить весь скопированный и отредактированный код с Вашими фото непосредственно на страницу,где планируется показ слайдера где нибудь в самом низу,чтобы не тормозить загрузку.
<style>/*слайдер для фото v-gol.ru*/
.vgol {border: 1px solid #ddd;/*цвет и толщина рамки*/
  background: url(урл фото)no-repeat;
  width: 600px;/*ширина блока*/
  height: 300px;/*высота блока*/
  transition: 1.2s;/*задержка анимации*/
}
#chet2:checked ~ .vgol {
  background: url(урл фото)no-repeat;
}
#chet3:checked ~ .vgol {
  background: url(урл фото)no-repeat;
}
#chetyre4:checked ~ .vgol {
  background: url(урл фото)no-repeat;
}
#chet5:checked ~ .vgol {
  background: url(урл фото)no-repeat;
}
#chet6:checked ~ .vgol {
  background: url(урл фото)no-repeat;
}
</style> @v-gol.ru

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог

Вторая часть НТМЛ или просто говоря обыкновенные чекбоксы с которыми вы часто сталкиваетесь заполняя различные анкеты устанавливается не посредственно там,где планируется вывод показа слайдов фотографий.
<input type="radio" name="chetyre" id="chet"/> <input type="radio" name="chetyre" id="chet2"/> <input type="radio" name="chetyre" id="chet3"/><input type="radio" name="chetyre" id="chet4"/><input type="radio" name="chetyre" id="chet5"/><input type="radio" name="chetyre" id="chet6"/>
<div class="vgol"></div>

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

Настройки слайдера для фото.



Настраивать данный слайдер-ротатор практически не нужно.Единственно что можно изменить ширину,высоту блока для вывода слайдера и изменить задержку появления новых слайдов изменив значение transition.Ссылку на фото следует внести в поле помеченное в коде CSS.Размер фото для слайдера следует подбирать исходя из высоты блока или ваших фото подогнав под себя размер,а ширина фото может быть любая.Эффект анимации в последнем случае будет выглядеть ещё эффектнее.






Отправить комментарий