Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Анимируем смены состояний интерактивных элементов #1

Merged
merged 1 commit into from
Nov 14, 2024
Merged

Анимируем смены состояний интерактивных элементов #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12,898 changes: 7,908 additions & 4,990 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion source/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ <h2 class="game__title">Игра</h2>
<div class="chat__footer">
<form action="#" method="post" class="form" id="message-form">
<label for="message-field" class="visually-hidden">Поле для ввода вопроса</label>
<input type="text" class="form__field" id="message-field">
<input type="text" class="form__field" id="message-field">
<button class="form__button btn">
Узнать
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down
4 changes: 4 additions & 0 deletions source/js/modules/full-page-scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,17 @@ export default class FullPageScroll {
this.screenElements[this.activeScreen].classList.remove(`screen--hidden`);
setTimeout(() => {
this.screenElements[this.activeScreen].classList.add(`active`);
// eslint-disable-next-line no-console
console.log(`activeItem1`);
}, 100);
}

changeActiveMenuItem() {
const activeItem = Array.from(this.menuElements).find((item) => item.dataset.href === this.screenElements[this.activeScreen].id);
if (activeItem) {
this.menuElements.forEach((item) => item.classList.remove(`active`));
// eslint-disable-next-line no-console
console.log(`activeItem`, activeItem);
activeItem.classList.add(`active`);
}
}
Expand Down
12 changes: 12 additions & 0 deletions source/scss/blocks/form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,15 @@
}
}
}

#message-form {
position: relative;
left: 75%;
width: 25%;
}

section.active #message-form {
left: 0%;
width: 100%;
transition: all 1s;
Comment on lines +150 to +159
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

☝️ - Где-то тут заложилась логическая ошибка. Если взять стандартный fullhd монитор и посмотреть на эту анимацию, то мы увидим, что в самом начале меняется длина кнопки с текстом. Она увеличивается, ее левый край прыгает, а текст смещается влево. Такого быть не должно. Кнопка должна стоять на месте.

☝️ - При работе с CSS анимациями важно следить за тем, чтобы они не ломали верстку вокруг себя. Анимации на одних элементах могут смещать другие, провоцировать появление скроллбаров от переполнения чего-то, давать изменения в размерах элементов в 1px (артефакты округления), которые заметно портят общее впечатление от интерфейса, могут просто скрывать за собой другие анимации или перебивать их стили, могут расходиться с изначальными состояниями компонентов, и.т.д. Помните о том, что анимации существуют не в вакууме, и всегда проверяйте, что они работают нормально после внедрения в реальный интерфейс.

}
1 change: 1 addition & 0 deletions source/scss/blocks/game.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,4 @@
margin: 0 30px 30px;
display: block;
}

8 changes: 8 additions & 0 deletions source/scss/blocks/intro.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,21 @@
}
}

section.active .intro__message {
transform: translate(0, 0);
opacity: 1;
transition: all 3s;
}

.intro__message {
flex: none;
width: 50.9rem;
max-width: 50%;
text-transform: uppercase;
font-size: 2.4rem;
line-height: 1.27;
transform: translate(0, 20px);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

☝️ - Весь макет сверстан в единицах rem, которые привязаны к размеру экрана. Фиксированные значения в px могут разойтись с ними и привести к багам или странным движениям на определенных размерах экрана. Лучше продолжать использовать rem. Если все же нужны пиксели, то стоит все проверять много раз на всех возможных размерах экранов - такие нестыковки легко пропустить.

💡 - Если вы раньше не сталкивались с версткой на плавающих размерах шрифта и с CSS-шлюзами, то будет полезно познакомиться с хорошей статьей по теме. В современном CSS у нас еще появилась функция clamp(), с помощью нее можно немного сократить код самих шлюзов, но суть происходящего не поменяется.

💡 - В целом при работе с CSS-анимациями очень важно обращать внимание на адаптивность. И, как ни странно, именно выбор единиц измерения часто будет отделять хорошо проделанную работу от глючного поделия, которое придется переверстывать, потому что оно рассыпается при малейшем изменении размера экрана. На появлении текста из прозрачности мы можем не заметить, что что-то поехало и логика анимации изменилась, но когда компоненты становятся более комплексными - проблемы становятся очевидными для всех вокруг. Обычно хорошей идеей будет выбор единиц измерения в соответствии с логикой в дизайне. Линия в 1 пиксель, смещение на высоту буквы (em/rem), увеличение от 0% до 100%, вписывание чего-то в размер окна (vh, vw, vmin, vmax) - там часто будет простое человеко-понятное описание происходящего. И его можно перенести в CSS с помощью местных единиц измерения. Поначалу такой подход может показаться требующим больших мыслительных усилий, чем тупая копипаста пикселей везде, или нагромождение media-выражений на каждый чих, но в долгосрочной перспективе мы экономим кучу времени на исправлениях и подпорках, чтобы все хоть как-то работало.

opacity: 0;

@media (min-width: $stop-scaling) {
width: 509px;
Expand Down
18 changes: 18 additions & 0 deletions source/scss/blocks/page-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@
display: block;
color: inherit;
padding: 0 0.5em 0.5em;
text-decoration: none;

&::after {
content: "";
Expand Down Expand Up @@ -281,6 +282,23 @@
background-color: $c-purple;
}
}
&:hover::before {
transform: scaleX(1);
}

&::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: $c-purple;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
}
}

Expand Down
8 changes: 8 additions & 0 deletions source/scss/blocks/slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,19 @@
}
}

section.active .slider__item {
transform: translate(0, 0);
opacity: 1;
transition: all 3s;
}

.slider__item {
display: flex;
flex-direction: column;
padding: 14.6rem 4rem 10rem 9.7rem;
height: auto;
transform: translate(0, 20px);
opacity: 0;

@media (min-width: $stop-scaling) {
padding: 146px 40px 100px 97px;
Expand Down