появление меню при скролле вверх
Появление элементов при скролле
В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы.
Мы будем использовать css и немного нативного js, без использования сторонних библиотек. Пристегнитесь!
Вы наверняка видели на многих сайтах красивую анимацию, где блоки появляются в тот момент, когда вы до них доскролили. Иногда они появлялись снизу вверх, иногда слева направо, а иногда непонятно даже как. Сейчас я покажу вам, как это делается.
Анимация при скролле: создаем html
Все начинается с html. Давайте сделаем разметку.
Мы здесь создали два больших блока и между ними текст. Два больших блока нам нужны, чтобы получился скролл страницы.
Сейчас добавим css для них и вы все поймете.
Появление элементов при прокрутке страницы: добавляем начальный CSS
В CSS мы, во-первых, зададим большим блокам высоту, чтобы у нас на странице появился скролл. Это нужно только для демонстрации.
А во-вторых, сделаем так, что в начальном состоянии элемент (наш текст) не будет виден, в дальнейшем он будет появляться, когда пользователь доскроллит до него.
Теперь перейдем к JS — нам ведь нужно понимать, когда пользователь доскроллил до нужного элемента.
Появление контента при скроллинге: работаем с JS
Нам повезло, веб не стоит на месте и регулярно улучшается, делая нашу жизнь чуточку проще. Если раньше нам нужно было сильно повозиться, чтобы реализовать плавное появление элементов при скролле страницы, то теперь все стало намного понятнее.
Я не буду сильно углубляться, если хотите, можете почитать отдельно про Intersection Observer. С помощью этого мы можем отслеживать видимость элемента в условном «окне» пользователя. И благодаря этому мы можем делать не только анимацию, но и, например, отложенную загрузку, либо «бесконечный» скролл.
Но вернемся к нашей теме. Вставим в JS следующий код:
Вот и все, что делает JS. Проверяет виден ли класс и если да, то добавляет к нему еще один класс.
А теперь зная это, давайте вернемся к CSS.
Появление элементов на сайте: заключительный шаг
Bот и все, теперь наш блок будет видимым, когда до него доскроллит пользователь.
Если хотите, вы можете сделать так, чтобы элемент появлялся снизу:
Ничего сложного. Вы можете экспериментировать, добавляя различные варианты к первоначальному состоянию, за затем меняя их на стандартные. Попробуйте, например, поиграться с transform: rotate(5deg).
Видео
4 комментариев к записи « Появление элементов при скролле »
Добрый день! Подскажите пожалуйста, как реализовать, чтобы после появления одного элемента таким же образом появлялся следующий? Вставляю второй элемент, а он появляется вместе с первым?
Попробуйте второму элементу задать задержу в css.
.second_element <
transition-delay: 1s;
>
Как сделать меню которое при скроле вверх показывается?
Сделал меню которое при прокрутке вверх показывается, но оно мне не нравится) Так как использовал абсолютное позиционирование. Какое есть более изящное решение с тем же функционалом, но без применения position:absolute
Оценить 2 комментария
А какие еще варианты?
По другому никак скорее всего.
Вообще это очень странное поведение, оно уж тогда либо всегда должно показываться, либо только вверху сайта. А так чтобы при скролле вверх появлялось очень непонятно. Ни разу такое не встречал и как-то неудобно что ли. Не очевидно для пользователя.
Вариантов много, просто хотелось бы посмотреть интерпретацию от профи.
Не наоборот, отпадает в необходимости в кнопке вверх, так как многие наверх идут именно за меню
..ну и не очевидно до первого скрола вверх) и довольно таки распространено среди правильных сайтов ведь удобно же
Александр Vampireos: «классический» вариант для обычных сайтов: https://getbootstrap.com/examples/navbar-fixed-top/
На лендингах меню как правило трансформируется в более компактное при скролле, но не исчезает совсем.
Скролить наверх на андроиде например вообще не люблю, потому что начинает вылезать адресная строка(которая скрывается при скролле вниз) и занимать много полезного места.
А если будет вылезать меню и адресная строка сразу, то получится непонятно что вообще.
Ну тут на вкус и цвет в общем-то.
Что за странная идея показывать меню, только при начале скролла вверх?
Смысл плавающего меню в том, чтобы оно ВСЕГДА было видно/доступно посетителю. Можно не целиком, можно от него только гамбургер или просто более компактный вид панельки, но должно быть понятно, что оно есть.
Закрепление меню в фигме при скроллинге на сайте.
В этой короткой инструкции вы узнаете про закрепление меню в фигме. Это можно использовать для закрепления любых элементов. Они будут оставаться неподвижными при скроллинге в режиме просмотра. Это поможет оживить ваш дизайн макет и показать как это может выглядеть на сайте заказчику, либо коллегам.
Для практики можете дублировать файл, где есть меню, которое вы можете закрепить.
Закрепление меню в фигме. Пошаговая инструкция.
Чтобы закрепить меню или любой другой элемент в фигме при скроллинге, выделите его и нажмите во фрейме. Затем напротив надписи «Fix position when scrolling» поставьте галочку.
Чтобы посмотреть как это будет выглядеть при скроллинге, нажмите на кнопку «Present» в верхнем правом углу.
Промотайте вниз и убедитесь, что шапка сверху закреплена. Если на сайте есть якорные ссылки, то посетителям будет удобно передвигаться по разделам лендинга.
Пропала функция «Fix position when scrolling» в Figma — что делать?
Если у вас пропала функция «Fix position when scrolling» в Figma, то нужно убедиться, что элемент, который вы выбираете находится во фрейме. Если выбрать элемент вне фрейма, то этой функции не будет.
Заключение
Итак, вы этом видео вы узнали как закрепить меню или любые другие элементы в Figma при скроллинге с помощью функции «Fix position when scrolling». Это можно использовать для элементов, которые должны оставаться неподвижными на сайте при скроллинге.
Запрет прокрутки при открытии модального окна
Приветствую. Представляю вашему вниманию перевод статьи «Prevent Page Scrolling When a Modal is Open», опубликованной 3 июня 2019 года за авторством Brad Wu
Бывало у вас такое? Открываете модальное окно, прокручиваете, а после закрытия оказываетесь на странице в позиции, отличающейся от той, с которой его открывали.
Подобное может происходить из-за того, что модальные окна являются такими же элементами страницы, как и любые другие. Они могут располагаться в фиксированной позиции, не препятствуя работе с остальным содержимым документа.
Порой это не становится проблемой. Например, когда высота содержимого страницы не превышает высоту области видимости экрана пользователя. Однако, в остальных случаях мы неизбежно сталкиваемся с этим. Хорошей новостью является то, что мы можем предотвратить появление скролла с помощью трюка с использованием CSS и JavaScript.
Давайте начнём с чего-нибудь простого
При открытии модального окна можно просто устанавливать элемент body по высоте равным области видимости (viewport) и скрывать вертикальную прокрутку:
Обратите внимание – чтобы это сработало, модальное окно должно быть по высоте меньше области видимости. Иначе полоса прокрутки будет нужна.
Отлично. А что насчёт мобильных?
Это решение отлично работает как на десктопах, так и на мобильных Android-устройствах. Однако, Safari для iOS требует немного больше внимания, поскольку body всё ещё может прокручиваться, когда модальное окно открыто.
Как альтернатива, мы можем задать для body фиксированное позиционирование.
Вот поэтому нам не обойтись без JavaScript
Можем использовать JavaScript, чтобы избежать всплытия события прикосновения к экрану. Все мы знаем, что при открытии модального окна, у него должен быть фоновый слой. К сожалению, в iOS метод stopPropagation() с событиями прикосновения работает немного неуклюже. Но у preventDefault() таких проблем нет. Это значит, что мы должны добавить обработчики событий к каждому DOM-элементу внутри модального окна, а не только к слою подложки или самому модальному окну. Хорошая новость в том, что много JavaScript-библиотек могут делать это, включая старый добрый jQuery.
Ах да, и ещё кое-что. Что если нам нужна прокрутка внутри модального окна? Нам всё ещё нужно вызвать реакцию на событие свайпа, но при достижении верха или низа модального окна, нам всё ещё нужно предотвращать всплытие. Кажется очень сложным (?? так что мы ещё не полностью выкарабкались).
Давайте улучшим фиксированный body
Вот с чем мы работали:
С помощью JavaScript можно вычислить положение прокрутки страницы, и добавлять это значение в CSS. Благодаря этому body не будет прокручиваться обратно в начальную позицию.
Данное решение работает, но после закрытия окна всё ещё происходит небольшой сдвиг. А именно, похоже, когда модальное окно открыто и для body задано фиксированное позиционирование, страница уже теряет положение прокрутки. Следовательно, нам нужно восстановить положение. Давайте изменим JavaScript, чтобы учитывать этот момент.
Вот и всё. Теперь body не будет прокручиваться при открытом модальном окне, а положение прокрутки сохраняется и при открытии и при закрытии модального окна.
Узнать, как изменить размер панели навигации при прокрутке с помощью CSS и JavaScript.
Как уменьшить навигационную панель при прокрутке
Шаг 1) Добавить HTML:
Создание панели навигации:
Пример
Шаг 2) Добавить CSS:
Стиль панели навигации:
Пример
/* Создание липкой/фиксированной навигационной панели */
#navbar <
overflow: hidden;
background-color: #f1f1f1;
padding: 90px 10px; /* Большой отступ, который будет сжиматься при прокрутке (с помощью JS) */
transition: 0.4s; /* Добавить эффект перехода при уменьшении заполнения*/
position: fixed; /* Липкая/фиксированная навигационная панель */
width: 100%;
top: 0; /* На вершине */
z-index: 99;
>
/* Стиль ссылок навигационной панели */
#navbar a <
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
>
/* Стиль логотипа */
#navbar #logo <
font-size: 35px;
font-weight: bold;
transition: 0.4s;
>
/* Ссылки на мышь-над */
#navbar a:hover <
background-color: #ddd;
color: black;
>
/* Стиль активной/текущей ссылки */
#navbar a.active <
background-color: dodgerblue;
color: white;
>
/* Отображение некоторых ссылок справа */
#navbar-right <
float: right;
>