ГлавнаяCSS, JQuery, JavaScript › Как сделать Слайд-Шоу из фотографий с помощью CSS3?


Как сделать Слайд-Шоу из фотографий с помощью CSS3?


Как сделать Слайд-Шоу из фотографий с помощью CSS3

Здравствуйте, дорогие читатели – Sozdaiblog.ru!

Сегодня я покажу, как сделать слайд-шоу из фотографий с помощью CSS3.

Используя только одни CSS стили, мы сделаем слайд-шоу, которое будет отображать фоновые изображения в полноэкранном режиме.

Так же, благодаря CSS анимации каждой картинке будет присвоен собственный заголовок, который будет появляться и исчезать, во время плавного перехода между изображениями.

Вашему вниманию будет представлено  4 различных эффекта «слайд-шоу», из которых Вы сможете выбрать наиболее подходящий для своих нужд.

 

Как создать Слайд-Шоу из фотографий на CSS3.

Для создания слайд-шоу Вам потребуется скачать архив с исходными файлами.

 

Как сделать Слайд-Шоу

ДЕМО СКАЧАТЬ

Затем, его нужно распаковать и с помощью ftp-клиента закинуть содержимое на сервер в папку с Вашим сайтом.

Теперь, давайте разберёмся с настройками.

Внутри распакованного файла будет папка «images», там будут храниться все изображения для создания слайд шоу.

В папке «CSS», Вы увидите 4 файла «style» и один «demo».

Определившись с выбором стиля (style) оформления слайд-шоу, открываем его и прописываем адреса ко всем картинкам. Сделать это не сложно, ищите похожие строки кода:

 

background-image: url(Путь к файлу/images/5.jpg);

 

Далее, открываем один из четырёх присутствующих в папке файлов «index» и прописываем путь к стилям CSS:

 

 <link rel="stylesheet" type="text/css" href="Путь к файлу/style1.css" />

 

В этом же файле задаём необходимые заголовки фотографиям.

После всех манипуляций, достаточно привязать ссылку на файл «index» к любому изображению или кнопке на Вашем Интернет-ресурсе и при нажатии, взору посетителя будет открываться полноэкранное слайд-шоу.

В ближайшее время появятся ещё публикации о том, как сделать слайд шоу из фотографий, а на сегодня это всё.

До новых статей….

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




32 комментарияА что думаете Вы?

  1. Александр Красильный

    Отличная статья Денис, все оказывается не так уж и сложно, если разобраться как следует. Теперь надо только покумекать, где-бы применить данный эффект.

    [Ответить]

    Денис Черников ответил:

    Спасибо, Александр! Статья получилась короткая, но информативная.

    [Ответить]

  2. Anna

    Здорово как! Я уже придумала какую галерею можно сделать, только осталось собрать фото))) Спасибо за такой интересный и красивый советик!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Анна! Смотрится очень эффектно!

    [Ответить]

  3. Alex

    Что-то ничего не видно кроме черного экрана и 4-х кнопок ДЕМО 1-4, когда переходишь на демо-просмотр. Почему так? :)

    [Ответить]

    Денис Черников ответил:

    У Вас наверное такая низкая скорость Интернета, что даже картинки не подгружаются или Вы самым плохим браузером пользуетесь типа оперы!

    [Ответить]

    Alex ответил:

    Точно! Опера! На других нормально. Может 12-я Опера и хороша, но я сижу на 11.10. Привык и она мне больше нравится. Просто когда нужно перехожу сразу же на другие, а здесь даже не подумал. :)

    [Ответить]

    Денис Черников ответил:

    Вот видите, оказывается всё решаемо. Может когда-нибудь владельцы оперы её допилят и она тоже будет правильно работать.

    [Ответить]

  4. Ольга

    Для меня это слишком сложно.

    [Ответить]

    Денис Черников ответил:

    Это не сложно, просто нужно попробовать!

    [Ответить]

  5. Алексей Виноградов

    классно, и не надо мудрить со скриптами, ajax'ами

    [Ответить]

    Денис Черников ответил:

    Рад, что понравилось!Просто, сердито и красиво.

    [Ответить]

  6. Николай

    Классная вещь! И главное доступно все описано и объяснено, спасибо!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Николай! Применяйте на здоровье!

    [Ответить]

  7. Ольга

    Спасибо! У вас очень много всего, думаю что пропишусь надолго. Моему блогу только три месяца, так что опыт пока маленький, но я учусь.Поэтому задам вопрос делитанта.Прописать путь к файлу ( я так понимаю , что эти картинки будут хранится в папке images, значит и путь нужно будет указывать к этой папке. Просто с этим у меня немного туго ещё.) Можно пример как это примерно будет выглядеть, я зрительно улавливаю быстрее.С этими путями к файлу я всё время что нибудь путаю.Ещё раз спасибо, за такую нужную информацию. с меня соц. сети.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Вот так выглядит путь — http:// Ваш сайт/public/wp-content/images/название картинки. В зависимости, где находится «images».

    [Ответить]

  8. Андрей

    Спасибо. Воспользуюсь обязательно!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Если что стучитесь!

    [Ответить]

  9. Кирилл

    как такую галерею поместить на фон сайта , а то весь текст который я вбиваю виден только тогда, когда фотографии меняются...

    [Ответить]

    Денис Черников ответил:

    Не задавался этим вопросом! По теории сделайте свой сайт и и для фона вместо цвета или обоев пропишите CSS для слайд-шоу.

    [Ответить]

  10. DarkSerHer

    Замечательная статья, только вот не прокаментино пришлось 3 часа потратить что бы понять что где)))))))) теперь пытаюсь вставить в свою страницу, чет не получается... СПАСИБО

    [Ответить]

    Денис Черников ответил:

    Рад, что Вам понравилось!

    [Ответить]

  11. Константин

    Здравствуйте Денис! Прекрасная статья. Я много чего перенимаю с вашего блога, Спасибо! Хотел задать вопрос- нужно сделать заставку на страницу входа, наподобие однотипных сайтов из Яндекс -каталога.Знаете когда посетитель заходит и попадает в дебри и не понятно где выход. Подскажите пожалуйста как сделать такую страницу? Просто сайт попал под фильтр и нужно таким образом прикрыть главную. Спасибо.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Константин! Немного не понял, зачем Вам это? Вы так не прикроете главную, а только распугаете всех посетителей!

    [Ответить]

  12. Константин

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

    [Ответить]

    Денис Черников ответил:

    Так сделайте отдельный файл в корне темы и редирект с главной. В принципе это всё!

    [Ответить]

    Константин ответил:

    Спасибо! Попробую.

    [Ответить]

    Денис Черников ответил:

    Обращайтесь!

    [Ответить]

  13. Степан

    Здравствуйте Денис! Мне не понятно как это вставлять в сайт. Ведь там уже есть файлы стилей и ... index.php. Как быть? Пожалуйста помогите!))

    [Ответить]

    Денис Черников ответил:

    Здравствуйте! Вставлять файлы стилей, значит добавить кусок кода в уже существующий файл!

    [Ответить]

  14. Андрей

    Отличное решение, но к большому сожалению не работает в Explorer. Может есть возможность исправить?

    [Ответить]

  15. Валерий

    Как слайд шоу css3 с музыкой преобразовать в видео.

    Попробовал oCam, хорошо сканирует до 854×480

    А вот шире хуже. Но ведь (в слайд шоу css3) фото 1024×681 на весь экран растягивается без потерь.

    Есть ли какой нибудь конвертер: html css3 в видео?

    [Ответить]

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

Вверх