Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.
Если нужен плавный скроллинг
Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:
- Auto. Стоит по умолчанию.
- Smooth. Плавный переход.
- Instant. Быстрый переход.
Так выглядит CSS-код на примере со вторым значением и условным селектором p:
p
scroll-behavior: smooth;
>
Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.
Пример с HTML-кодом
Шаг 1. Создадим два блока с ссылками друг на друга:
баг на GGSTANDOFF деньги на балансе есть ну нечего не получится
Плавная прокрутка
Блок 1
Перейди по гиперссылке, чтобы увидеть плавный скроллинг.
Нажми сюда, чтобы перейти к Блоку 2.
Блок 2
Нажми сюда, чтобы перейти к Блоку 1.
Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега . Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.
html scroll-behavior: smooth;
>
#блок1 height: 1000px;
background-color: #ffa3f6;
>
#блок2 height: 1000px;
background-color: #fffc9c;
>
Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.
Совместимость с браузерами
Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.
Если нужен параллакс
Parallax — это эффект, при котором элементы заднего плана движутся быстрее или медленнее, чем объекты на переднем плане. Например, пользователь прокручивает страницу и видит, что фоновое изображение движется с одной скоростью, а текст — с другой.
Пример с HTML-кодом
В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.
Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:
Прокрутите страницу дальше
Этот текст нужен просто для того, чтобы продемонстрировать эффект. Вам стоит прокрутить страницу вверх и вниз — текстовый блок будет двигаться, а изображение останется на месте.
Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.
НИКОГДА НЕ ПОВТОРЯЙ ЭТО В STANDOFF 2
body, html height: 90%;
>
.paral
background-position: center;
background-attachment: fixed;
background-size: cover;
background-image: url(‘https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1auto=formatw=2070
height: 90%;
>
В итоге получился параллакс на странице.
Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:
Совместимость с браузерами
Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.
Дополнительные примеры
Чтобы лучше разобраться с CSS-свойствами, рассмотрим другие эффекты для прокрутки на сайте .
Пример 1
По шагам рассмотрим, как добиться эффекта многоуровневого скроллинга . В этом случае несколько объектов на сайте будут двигаться с разной скоростью при прокрутке.
Шаг 1. Напишем две строки следущим образом:
Блок 1
Блок 2
Шаг 2. Добавим CSS-код внутри тега . Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:
section position: absolute;
min-height: 90vh;
width: 100%;
transform-style: inherit;
position: relative;
>
.block1 z-index: 2
background: #ff9012;
;
>
.block2::before background: url(https://images.unsplash.com/photo-1536308037887-165852797016?ixlib=rb-1.2.1auto=formatw=826
content: »;
top: 1; left: 1; right: 1; bottom: 1;
position: absolute;
display: block;
transform: translateZ(-.5px) scale(2);
z-index: -2;
background-size: cover;
>
Шаг 3. Там же укажем параметры заголовков:
…
h1 font-size: 3.7rem;
position: absolute;
padding: 0.8rem;
background: #fffcfc;
transform: translateZ(-1px) scale(1) translate(-25%, -25%);
top: 49%;
left: 49%;
text-align: center;
>
.block1 h1 z-index: 2;
transform: translate(-49%, -49%);
>
.block2 h1 z-index: 2;
transform: translateZ(-.4px) scale(1.2) translate(-39%, -39%);
>
…
Шаг 4 . Определим параметры других элементов:
…
*,
*::before,
*::after,
:root box-sizing: border-box;
margin: 1;
padding: 1;
>
html height: 95%;
overflow: hidden;
>
body height: 95%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 0.8px;
transform-style: preserve-3d;
font-size: 40%;
font-family: ‘PT Astra Sans’;
>
…
В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:
- изображение на фоне блока 2;
- заголовок «Блок 2»;
- блок 1 с оранжевым фоном.
Так выглядит многоуровневый скроллинг.
Пример 2
Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок:
Шаг 1 . Напишем код с двумя текстовыми блоками таким образом:
Зафиксированный элемент
Элемент
Шаг 2. Напишем следующий CSS-код внутри тега :
body font-family: Times New Roman;
>
h1 text-align: justify;
>
.wrap background-color: #52ff83ab;
width: 90%;
height: 2000px;
margin: 30px;
>
.elem background: #6052ff;
width: 150px;
height: 150px;
color: #fcfcfc;
align-items: center;
justify-content: center;
display: flex;
position: fixed;
>
При помощи свойства значения fixed удалось сделать так, чтобы элемент двигался вместе с прокруткой.
Пример 3
В этом случае разберемся, как сделать горизонтальный скроллинг.
Шаг 1. Создадим четыре строки текста таким образом:
Раз
Два
Три
Четыре
Шаг 2 . Добавим CSS-код внутри тега . В коде обозначим размеры текстовых блоков и их цвета.
body font-family: PT Astra Sans;
margin:1;
>
#container .type position:relative;
display:inline-block;
width:150vw;
height:99vh;
>
#container .type > div position:relative;
width:99px;
height:99px;
color:#080808;
line-height:.8;
top:48%;
left:48%;
font-weight:bold;
font-size:96px;
>
#container position:absolute;
overflow-x:scroll;
overflow-y:scroll;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color:#ccc;
width:99vh;
height:99vw;
>
#container2 transform: rotate(90deg) translateY(-98vh);
transform-origin: top left;
white-space:nowrap;
font-size:1;
>
.raz background-color: #00ff48;
>
.dva background-color: #ff00d5;
>
.tri background-color: #f00;
>
.nazad background-color: #fff71c;
>
Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.
Заключение
Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.
В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.
Источник: timeweb.cloud
Автоматический скролл вниз страницы, или как сделать эффект чата с сообщениями снизу вверх
Доброго времени суток господа, недавно возникла необходимость, написать сообщения с сортировкой от старых к новым, тоесть вверху старые внизу новые, чтобы это все автоматически скроллировалось вниз, ну в общем как в ВКонтакте, Одноклассниках и т.д.
Долгие поиски в гугль, ничего толком не дали, библиотек на js я не нашел, конечно были варианты с jQuery (считать суммарную высоту сообщений, или применять сразу большие значения), на Vue.js решение было, но я им не пользуюсь.. И вот я открыл для себя object.scrollIntoView который может прокрутить блок до указанного элемента.
Метод Element.scrollIntoView() интерфейса Element прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.
Определимся с поставленной задачей
- Начальные сообщения при отсутствии прокрутки начинаются снизу
- При добавлении сообщения, блок прокручивался до этого элемента
Использовать будем
- CSS Flexbox
- JS Element.scrollIntoView()
Для начала нам необходимо, написать HTML контейнеры, которые нам понадобятся для нашего чата, с автоматической прокруткой сообщений. Пишем такой html код:
Пишем стили для минимального функционала нашего чата
.wrap_Scrollbottom — Это будет наш основной блок, с фиксированной высотой, для того, чтобы дочерний мы могли позиционировать.
.container_Scrollbottom — Этот блок мы сделаем с автоматической, но максимальной высотой в 100%, и сделаем его прокручиваемым.
.messages — Именно в него, будут попадать сообщения.
.wrapper_Scrollbottom — А этот будет нашим хелпером, для скроллинга, он не будет отображаться, но будет играть важную роль для работы чата.
/** * Высота основного блока фиксированная * Flexbox с позиционированием контента внизу блока */ .wrap_Scrollbottom < width: 500px; height: 500px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #b9b9b9; position: relative; >/** * Максимальная высота этого блока должна быть 100% * По достижении 100% появится скролл * Блок позиционируется внизу родительского блока */ .container_Scrollbottom < padding: 0 10px; max-height: 100%; overflow-y: auto; >/** * Пока нет сообщением показываем это */ .messages:empty::before < content: ‘Нет сообщений’; display: block; padding: 20px; text-align: center; color: gray; >/** * Оформляем немного наши сообщения */ .message
.wrap_Scrollbottom — Это будет наш основной блок, с фиксированной высотой, для того, чтобы дочерний мы могли позиционировать.
.container_Scrollbottom — Этот блок мы сделаем с автоматической, но максимальной высотой в 100%, и сделаем его прокручиваемым.
.messages — Именно в него, будут попадать сообщения.
.wrapper_Scrollbottom — А этот будет нашим хелпером, для скроллинга, он не будет отображаться, но будет играть важную роль для работы чата.
Теперь нужно добавить JS кода немного, чтобы при вставке новых сообщений, скролл прокручивал контент в самый низ.
/** * Функция будет прокручивать страницу, * пока не будет виден селектор .wrapper_Scrollbottom * При добавлении нового элемента в .messages вызываем функцию lastMessageScroll(‘smooth’); */ function lastMessageScroll(b) < var e = document.querySelector(‘.wrapper_Scrollbottom’); if (!e) return ; e.scrollIntoView(< behavior: b || ‘auto’, block: ‘end’, >); >
Теперь при вставке сообщения, вызываем функцию lastMessageScroll(‘smooth’); и блок будет прокручен в самых низ, пока блок с классом wrapper_Scrollbottom не будет виден.
Так-же вы можете посмотреть ДЕМО или скачать архив с полным примером
Источник: andryushkin.ru
Прокручиваемый HTML-блок
Создаем блок с прокручиваемым текстом с помощью CSS и HTML
Прокручиваемый HTML-блок — это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.
Создать прокручиваемый HTML-блок ( скролл для сайта ) довольно просто.
Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow , чтобы указать поведение элемента, когда содержимое выходит за его пределы.
Что делать с дополнительным текстом?
Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:
- Перепишите текст, чтобы он стал короче.
- Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
- Обрежьте текст там, где он выходит за пределы контейнера.
- Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.
Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.
HTML и CSS для этого :
здесь текст.
overflow: auto; указывает браузеру добавлять полосы прокрутки ( скролл ), если текст выходит за границы блока div .
Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.
Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden . Если вы не укажете свойство overflow , скролл на сайте работать не будет, и текст будет выходить за границы блока div .
Вы можете добавить полосы прокрутки не только для текста
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.
В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.
Полосы прокрутки могут использоваться в таблицах
Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow ( как способ сделать скролл ), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,
Самый простой способ сделать это — так же, как изображение и текст, просто оберните таблицу в блок div , установите его ширину и высоту и добавьте свойство overflow ( скролл внутри div ):
| Jennifer | 502-5366 |
Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.
Существует множество способов исправить это, например, изменение ширины таблицы и некоторые другие. Но я предпочитаю просто отключить горизонтальную прокрутку с помощью свойства CSS3 overflow-x . Просто укажите для блока div свойство overflow-x: hidden; , и горизонтальная полоса прокрутки будет удалена. Обязательно проверьте, чтобы одновременно с этим у вас не исчез и сам контент.
Firefox поддерживает использование overflow для тегов TBODY
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot . Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.
Это работает только в Firefox , что не очень хорошо, но это полезная функция, если ваши читатели используют только Firefox . Посмотрите следующий пример, чтобы понять, что я имею в виду.
.
Вадим Дворников автор-переводчик статьи « HTML Scroll Box »
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, отклики, лайки, подписки, дизлайки низкий вам поклон!
Источник: www.internet-technologies.ru