Frontend BRO
Привет, я Антон и я Frontend-разработчик. Здесь я делюсь своим опытом через: видеоуроки, короткие заметки и аудиоподкасты. Если ты новичок, то мне есть, что тебе рассказать. Если опытный — то тебе есть, чем поделиться в комментариях. Присоединяйся!
نمایش بیشتر- مشترکین
- پوشش پست
- ER - نسبت تعامل
در حال بارگیری داده...
در حال بارگیری داده...
Показываю и рассказываю, как добавить прелоадер на сайт на время загрузки: * всей страницы; * элементов списка на странице.
https://t.me/+C1XfZwrqdQAyZWJi- Анимируй, канал с анимацией для сайтов.
https://t.me/+ZF4uKgvv2TNmZWFi- Frontend BRO, мой канал с подкастами, короткими заметками и видеоуроками. Добавляйтесь в соц. сети:
https://vk.com/zero.one.zerohttps://www.instagram.com/one.zero.dev/
Таймкоды: 00:13 - добавляем HTML и CSS для прелоадера №1 04:25 - пишем JS для прелоадера №1 08:32 - HTML + данные с сервера 12:08 - пишем JS для получения контент от сервера 17:36 - добавляем HTML и CSS для прелоадера №2 20:06 - пишем JS для прелоадера №2 27:09 - бонус: меняем состояние кнопки на время загрузки контента 29:43 - заключение
.submenu { transition: 0.3s; visibility: hidden }
— меню второго уровня. При наведении курсора должен становиться visibility: visible;
.submenu-item { transition: 0.3s, color: black }
— пункт меню второго уровня. При наведении курсора меняет цвет текста.
🤡 Готово! Теперь если убрать курсор с пункта второго меню, то меню второго уровня станет visibility: hidden не через 0.3 секунды, а только через 0.6 секунд.
💡 Как избежать:
Задать transition с указанием свойств, которые нужно анимировать:
.submenu { transition: visibility 0.3s; visibility: hidden }
.submenu-item { transition: color 0.3s, color: black }
if (Cookies.get('order_modal_shown') !== 'Y') {
Cookies.set('order_modal_shown', 'Y', { expires: 1 })
}
طرح فعلی شما تنها برای 5 کانال تجزیه و تحلیل را مجاز می کند. برای بیشتر، لطفا یک طرح دیگر انتخاب کنید.