
Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.
Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.
Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.
Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.
Обратите внимание, что фоновое изображение в каждом блоке встаривается в размер экрана браузера, а лишнее отрезается.
Если данная секция будет находиться в малом контейнере или использоваться не соответсвующая картинка, то будет теряться качество или отрезаться много нужного.
Текстовая информация
Текстовая информация
Текстовая информация
1 |
<div class="fix-bg" style="background-image: url(bg-image.jpg)"></div> |
1 2 3 4 5 6 7 8 |
.fix-bg { height: 520px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; margin: 20px 0; } |
Для мобильного варианта можно отключить эту фиксацию и изменить высоту секции, добавив:
1 2 3 4 5 6 |
@media (max-width: 767px) { .fix-bg { background-attachment: scroll; height: 320px; } } |
Красивый эффект смены изображений колесом прокрутки мыши на WebGL
Двигающийся по секции мяч на CSS
Появляющиеся от движения курсора мыльные пузыри
Здравствуйте Александр.
Не нашел на вашем сайте тему как установить блок комментариев. Перебрал много вариантов из разных источников, не получается, чего-то я наверное недопонимаю... Не могли бы вы помочь ?
Здравствуйте. Скажите пожалуйста, а как мне фиксированный фон использовать если сайт на bootstrap? Ничего не получается. Вернее все работает, но картинка не масштабируется, видно только ее центральную часть.
Она так и работает.
Картинка идет во весь экран (что не умещается отрезается), а видно ее только в окне.
Соотв. если контейнер узкий, многое будет не видно.
Здравствуйте Александр. Большое спасибо, получилось. Но не совсем, как мне кажется. На смартфоне при прокрутке туда сюда и если пальцем верх вниз, картинка дергается. Брал ваши коды html и css, смотрел и добавлял по советам из сети, не получается, картинка в фикс-боксе дергается. Что это может быть? Если не трудно, посмотрите, вот ссылка https://assorty.site/. Может в css что не так?
У меня нормально на телефоне, думаю зависит от него или от браузера.
Как вариант, это просто убрать этот эффект для него (в css выше есть пример)
Понятно. Спасибо !