Перелистывающиеся страницы с фотографиями

Решение сделано на чистом CSS для 5-ти страниц (фотографий)

Пример:

HTML:

CSS:

Ссылки на изображения задаются в переменных --bg-image-1 - --bg-image-5

Найдено на codepen.io у пользователя Amit Sheen

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Елена:

    Здравствуйте. как правильно указать путь к картинке? не отображается у меня почему то

    Ответить
    • Alexander:

      От корня, где она лежит, например : /images/pic.jpg

      Ответить
  • Имя:

    Как увеличить книгу? Побольше ее сделать.

    Ответить
    • Alexander:

      Если сложно разобраться в стилях или большое кол-во правок для изменения размера, используйте трансформацию на увеличение.
      В данном примере она тоже используется: transform: scale(1.2);
      Увеличите масштаб и высоту контейнера

      Ответить
  • Юрий:

    Отлично. Только в Яндекс-браузере, в Хроме и в Опере у меня есть глюк - когда страница пролистывается, быстро 1 раз мелькает предыдущая. В Мозилле этого нет, там всё хорошо. У меня только такое или нет, не знаю.

    Ответить
    • Alexander:

      Спасибо за замечание!
      Что то от сайта мешает...
      В вакууме все нормально, и даже с подключенными стилями этого сайта.
      Сейчас буду смотреть, искать причину

      Терпеть не могу такие непонятки, еще и для конкретного браузера.
      Пока писал коммент, у меня стала мигать только одна страница..
      Потом обновил - перестала мигать... еще раз обновил - начала.

      Вчера буквально парился также с хромом из-за такого же мигания в нем 3д табов на мобильной версии. Там пришлось менять стиль трансформации...

      Ответить