Страницы

Поиск по вопросам

вторник, 4 июня 2019 г.

Изменение изображения при прокрутке

Как можно реализовать вот такую штуку: на сайте http://ginza.ru/msk в самом низу после "еще новости" - при прокрутке страницы изображение тоже прокручивается?


Ответ

Можно открыть страницу в developer tools и посмотреть:
.row-header-main-footer-picture { background-image: url([путь-к-картинке]); background-position: 50% 50%; background-attachment: fixed; background-size: cover; }
как видите фоновая картинка сделана с background-attachment: fixed;. Это заставляет картинку "стоять на месте" при прокрутке страницы. А сверху на нее наложены два блока, один с прозрачным фоном (тот, где дата-лого-телефон), второй с белым фоном (заказать доставка-поделитесь отзывом). Но главное- фон стоит на месте при прокрутке.
Еще раз - воспользуйтесь developer tools любого браузера.

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

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