Как сделать плавно выезжающий блок css
Перейти к содержимому

Как сделать плавно выезжающий блок css

  • автор:

Выезжающая боковая панель (sidebar)

Качественную отзывчивую систему навигации создать не так просто, как может казаться на первый взгляд. Некоторые пользователи активно используют клавиатуру, у некоторых огромные экраны монитора, а некоторые будут заходить на страницу с небольшого мобильного устройства. У каждого посетителя должен быть доступ к меню с возможностью открывать и закрывать панель навигации.

Демонстрация адаптивного макета с sidebar от настольного компьютера до мобильного устройства. Светлая и темная тема на iOS и Android.

Веб-тактика

В компоненте выезжающей боковой панели (sidebar) предстоит объединить несколько важных функций веб-платформы:

  1. CSS :target
  2. CSS сетка
  3. CSS преобразования
  4. CSS Media Queries для области просмотра и пользовательских предпочтений
  5. JS для focus (UX-улучшение)

В рассматриваемом решении выезжающая боковая панель с переключателем будет только для “мобильного” окна шириной до 540 пикселей. 540 пикселей будет точкой остановки для переключения между интерактивным (для мобильного) и статическим (для десктопа) макетами. В статическом макете sidebar присутствует в виде колонки с навигацией.

CSS-псевдокласс :target

Клик по каждой из этих ссылок изменяет хэш для URL страницы, а затем с помощью CSS-псевдокласса показывается или скрывается боковая панель навигации:

@media (max-width: 540px) < #sidenav-open < visibility: hidden; >#sidenav-open:target < visibility: visible; >>

Изменнение хэша в URL страницы.

CSS grid

Раньше для выезжающих боковых панелей было принято использовать контейнеры с абсолютным или фиксированным позиционированием. Однако, с появлением CSS-grid, CSS-свойство grid-area позволяет назначить несколько элементов в одну строку или столбец.

Сетка

Основной элемент макета #sidenav-container представляет собой сетку, которая создает 1 строку и 2 столбца с названием stack для первой.

#sidenav-container < display: grid; grid: [stack] 1fr / min-content [stack] 1fr; min-height: 100vh; >@media (max-width: 540px) < #sidenav-container >* < grid-area: stack; >>

Подложка

Анимированный HTML=элемент – боковая панель навигации. У него есть 2 дочерних элемента: контейнер с навигацией с названием [nav] и подложка с названием [escape] , назначение которой – закрывать панель с меню.

#sidenav-open

Демонстрация происходящего от смены соотношения.

CSS 3D-преобразования и переходы

Теперь панель навигации на мобильном экране накладывается поверх контента. Для sidebar надо добавить ещё немного CSS. Вот UX-цели, который разберём в следующем разделе:

  • Анимировать разворачивание/сворачивание
  • Анимировать с плавным движением, только если пользователь не возражает
  • Анимировать visibility , чтобы фокус клавиатуры не исчезал за пределы экрана

Реализовывать анимацию для движения боковой панели будем с учётом предпочтений пользователя.

Доступность движения

Кто-то не любит плавное движение при появлении боковой панели и предпочитает быстрое появление sidebar. Такое предпочтение можно учитывать с помощью настройки внутри медиа-запроса prefers-reduced-motion: reduce значения CSS-переменной —duration . Это учитывает предпочтения пользователя для движения (если доступно), настроенные в операционной системе.

#sidenav-open < --duration: .6s; >@media (prefers-reduced-motion: reduce) < #sidenav-open < --duration: 1ms; >>

Демонстрация взаимодействия с применением duration и без неё.

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

Transition, transform, translate

Панель скрыта (по умолчанию)

Чтобы установить для боковой панели навигации на мобильном устройстве состояние по умолчанию, за пределами экрана, нужно спозиционировать элемент с помощью transform: translateX(-110vw) .

Обратите внимание, к типовому значению -100vw для скрытия за пределы экрана, добавлены ещё 10vw , чтобы гарантировать, что тень блока боковой навигации не попадёт в видимую область окна, когда панель скрыта.

@media (max-width: 540px) < #sidenav-open < visibility: hidden; transform: translateX(-110vw); will-change: transform; transition: transform var(--duration) var(--easeOutExpo), visibility 0s linear var(--duration); >>
Панель открыта

Когда, при изменении хэша в URL, :target соответствует HTML-элементу #sidenav-open , его надо спозиционировать с помощью translateX() в установленные для открытого состояния координаты 0 и наблюдать, как CSS переместит элемент из его исходной позиции -110vw в указанную, равную 0 , в течение var(—duration) времени.

@media (max-width: 540px) < #sidenav-open:target < visibility: visible; transform: translateX(0); transition: transform var(--duration) var(--easeOutExpo); >>

Изменение видимости

Следующая цель – реализовать невидимость меню, когда sidebar скрыт, от программ чтения с экрана. Это нужно, чтобы фокус не переводился на меню, скрытое за пределами экрана. Для этого можно изменять CSS-свойство visibility панели при изменениях :target :

  • Когда панель появляется, чтобы она была видимой и на ней можно было сфокусироваться, не следует изменять свойство visibility .
  • Когда панель скрывается, visibility должно изменяться на hidden , но с задержкой, т.е. после того, как она покинет видимую часть окна

Улучшение UX-доступности

Ссылки

Поскольку рассматриваемое решение полагается на изменение URL-адреса для управления состояниями, здесь следует использовать HTML-элемент , у которого достаточно полезных для доступности функций. Можно немного украсить интерактивные элементы, чтобы намерения выражались яснее.

Демонстрация озвучивания и UX-взаимодействия с клавиатурой.

Теперь основные кнопки взаимодействия с sidebar четко указывают свое назначение как для мыши, так и для клавиатуры.

:is(:hover, :focus)

Этот удобный функциональный CSS-псевдоселектор позволяет легко использовать стили при наведении и делиться ими с фокусом.

.hamburger:is(:hover, :focus) svg > line

Немного Javascript

Кнопка Esc для сворачивания

Клавиша Escape на клавиатуре должна закрывать меню, например так:

const sidenav = document.querySelector('#sidenav-open'); sidenav.addEventListener('keyup', event => < if (event.code === 'Escape') document.location.hash = ''; >);
UX-фокус

Следующий фрагмент помогает сосредоточиться на кнопках открытия и закрытия после того, как они появляются или скрываются.

sidenav.addEventListener('transitionend', e => < const isOpen = document.location.hash === '#sidenav-open'; isOpen ? document.querySelector('#sidenav-close').focus() : document.querySelector('#sidenav-button').focus(); >)

Когда боковая панель навигации откроется, фокус переместится на кнопку закрытия. Когда боковая навигация закроется, фокус переместится кнопку открытия. Это делается в JavaScript с помощью вызова для элемента метода focus() .

Пример выезжающей боковой панели:

Как сделать выпадающий блок на чистом CSS?

Сегодня я покажу Вам как можно, на чистом CSS cделать выпадающий блок. В основе всего примера лежит использование HTML чекбокса.

body background-color: #f0f0f0;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
>

/* псевдоэлемент, отменяет выделение текста стилями при быстрых кликах */
.toggler__label::selection color: none;
background: none;
>

/* Стили для заголовка блока, при нажатии на который появляется дополнительный блок */
.toggler__label display: block;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
padding: 15px;
font-size: 1.1em;
background-color: #fff;
>

/* скрытый блок позиционируется абсолютно, чтобы не оставлять пустое место */
.toggler__content-box position: absolute;
transform: translate(9999px);
opacity: 0;
>

/* скрываем checkbox */
.toggler__checkbox display: none;
>

/* при нажатии на блок label (каждый label через аттрибут for привязан к конкретному чекбоксу посредством уникального id)
чекбокс меняет свое состояние (но мы этого не видим, так как скрыли его)
и элемент с классом .toggler__content-box, ближайший к нажатому чекбоксу, плавно выдвигается, отображаяя
свое содержимое. */
.toggler__checkbox:checked ~ .toggler__content-box display: block;
position: relative;

transition: opacity .5s linear;
transform:translate(0);
opacity: 1;

margin-top:5px;
cursor: pointer;
border: 1px solid #ddd;
padding: 15px;
font-size: 1em;
background-color: #fff;
>

Программирование на JavaScript с Нуля до Гуру 2.0


Вместе с Бонусами курс содержит 123 урока общей продолжительностю 26 часов 46 минут и 19 секунд.


Это курс 2020-го года, поэтому, безусловно, да, информация актуальная. А когда она становится уже не совсем актуальной, то курс снимается с продаж и выпускается его новая версия.


Тематически он связан, некоторые темы совпадают (циклы, условия и т.п.), но это абсолютно другой курс с другим подходом и с упором на те вопросы, которые я получал несколько лет. Так же надо понимать, что подход к программированию на JavaScript сильно изменился за эти годы. И всё это уже учтено в новом курсе.

В итоге мы должны увидеть следующее:

Создано 16.06.2020 13:30:10

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    ЗаголовокDwweb.ru

    У нас есть основной блок. Который с позиционирован абсолютно(position: absolute;), вы его положения видите после загрузки страницы.

    Нас прежде всего интересует:

    Механизм работы плавно появляющегося блока:

    У нас есть два блока( «h1» и «.begin»), для них будут прописаны свойство появление слева.

    И блок между ними, который будет поваляться слева это абзац «

    «.

    Для блоков слева выставляем

    Для блоков справа :

    position: relative;
    animation: showLeft(имя) 1s(время);

    keyframes для левого блока:

    keyframes для правого го блока:

    Соберем весь CSS:

    div.main .center h1

    font-size: calc(16px + 1.2vw);

    animation: showLeft 1s;

    Про остальные стили не вижу никакого смысла писать.

    Результат плавного появления блока на примере + скачать

    Плавное появление блока.

    Давайте сразу приведем пару ссылок, что будем делать и где скачать:

    В данном случае картинка, как иллюстрация для заполнения внутренней площади блока. что-то же должно показываться. картинка в данном случае будет выступать заменителем блока!

    В общем то, код довольно простой. Просто я тут перебирал старые страницы и смотрю, а вот такого варианта на данной странице нет — думаю не порядок, такой простой вариант медленного появления блока должен здесь быть :

    Убираем все отступы наружные и внутренние :

    Скроем колесо прокрутки, если она вдруг появится.

    Позиционируем, растягиваем, заполняем.

    #img <
    position: absolute;
    background: url(onload.jpg) center no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    /*Устанавливаем время и имя анимации*/
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    >

    Добавляем keyframes, от полной невидимости(opacity: 0;) до полной видимости(opacity: 1;)

    @-webkit-keyframes fadeIn <
    0%
    100%
    >
    @keyframes fadeIn <
    0%
    100%
    >

    Не забываем по блок, который будет у нас появляться

    Собираем все вместе и получаем блок появляющийся постепенно:

    Локальное плавное появление блока.

    Если вам нужен простой код плавного появления блока, то следующий пункт про такой блок.

    Как сделать плавное появление блока css

    Для третьего варианта применена абсолютно та же схема, что и в предыдущем пункте, блок будет появляться от невидимого состояния в видимое…

    Здесь по-моему и объяснять нечего… код намного меньше и проще!

    .container < animation: show 2s;

    ruweb

    Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
    © 2015 — 2024 Контакты. Реклама на сайте
    Лучший хостинг : RUWEB + помощь по RUWEB

    19 января 2017 г. CSS-анимации: Transitions и Animations. Motion Path Module CSS

    CSS-анимации: Transitions и Animations. Motion Path Module CSS

    До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

    CSS transitions

    CSS transitions позволяют сделать изменения CSS-свойств плавно и в течение некоторого времени. Таким образом, вы получаете возможность контролировать процесс перехода элемента от одного состояния к другому. Начнем с простейшего примера и продолжим дальше.

    При наведении курсора на квадрат плавно изменяется цвет фона.

    Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

    • transition-property;
    • transition-duration;
    • transition-timing-function;
    • transition-delay;
    • transition;

    transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

    transition-property: width;

    transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

    transition-duration: 1s;

    transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

    transition-timing-function: cubic-bezier(0, 0, 1, 1);

    transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

    transition-delay: 500ms;

    transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

    transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

    У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

    С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

    CSS animations

    CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

    Наш круг ожил и он как будто пульсирует.

    Есть 9 свойств, которые позволяют контролировать CSS animations:

    • animation-name;
    • animation-duration;
    • animation-timing-function;
    • animation-delay;
    • animation-iteration-count;
    • animation-direction;
    • animation-play-state;
    • animation-fill-mode;
    • animation;

    animation-name — здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

    animation-name: my-animation;
    @keyframes my-animation < 0% < opacity: 0; >100% < opacity: 1; >>

    animation-iteration-count — задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

    animation-iteration-count: 2;

    animation-direction — задаёт направление анимации.

    animation-direction: reverse;

    animation-play-state — данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

    animation-play-state: paused;

    animation-fill-mode — устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

    • none — анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
    • forwards — анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
    • backwards — анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
    • both — анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;
    animation-fill-mode: backwards;

    Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

    С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример — это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

    Motion Path Module

    Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

    В этой спецификаии есть 3 свойства:

    • motion-path;
    • motion-offset;
    • motion-rotation;

    motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

    motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');

    motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

    @keyframes airplane-fly < 0% < motion-offset: 0; >100% < motion-offset: 100%; >>

    motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).

    motion-rotation: auto;

    К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

    Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

    Вам также может понравиться
    Гайд по процессу разработки проекта с командой Stfalcon
    Принципы веб-дизайна интерфейса пользователя
    10 самых распространенных ошибок веб-дизайна

    • web-development ,
    • web-design

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *