я столько статей, которые вообще не помогли прочитала перед тем как нашла ваше видео. Все заработало. Все понятно. Смогла под себя без проблем подкорректировать JS БЛАГОДАРОЧКА
Видео потрясающее, все очень доступно, прям очень, сложностей в исполнении вообще нету ! НО !!! Как запретить сурол сайта во время появления loader ??? Пожалуйста, помогите 🤣
@@LectorWeb Спасибо большое за совет, но он не помог... Пришлось подумать самому и вот что полезного вышло... Для того чтобы убрать скролл во время появления анимации загрузки, в файле JS где написан основной код loader, после объявления переменной mask, можно сразу же объявить переменную "любое имя для переменной" которая привязана к тегу body и установить ей соответствующий класс... В CSS к классу переменной body задать стиль overflow: hidden; ... И сразу же вывести событие связанное с body... Потом написать полностью событие window и по окончанию события window отозвать класс у body который мы присвоили... Как работает сие дияние... Сразу же на сайте запрещается скрол, после начинается событие loader, и класс отнимается только после того как выполнится полностью событие loader... 👍
Появился еще один вопрос. Как сделать чтобы была плавность? Когда страница загрузилась, чтоб она не резко появлялась, а плавно. Знаю что такой эффект есть в анимации. и понимаю что надо или маску плавно увести или страницу плавно вывести. но не понятно что нужно прописать?
А можно маске просто z-index задать? -100, например. Она и так будет скрываться. Я вот сейчас прохожу курс по JS и там учу AJAX. Пока данные идут, то у меня ваш лоадер показывается)
Добрый вечер, Алексей! Как я понял, вчера вы не смогли выйти на связь... Смотрели теги, которые я отправлял вам для вашего нового видео...? Только что загрузил видео для вас, - ссылку отправил вам в личное сообщение.
Открываете Chrome Dev Tools, клавиша F12, вкладка Network и там есть список, по умолчанию стоит Online, выбираете нужный вам вариант и перезагружаете страницу
Как угодно, обнять в ещё один блок, сделать релатив, и в этот блок положить и сам лоадер и логотип по отдельности. Сделать их абсолютами. Лоадер будет крутиться сам по себе, логотип стоять на месте
за быстрое и понятное объяснение респект! остальные со своими 22 минутами курят в сторонке)))
Огромное вам спасибо Алексей,очень полезное и содержательное видео,а главное вы сумели объяснить это качественно и быстро.Лайк!
я столько статей, которые вообще не помогли прочитала перед тем как нашла ваше видео. Все заработало. Все понятно. Смогла под себя без проблем подкорректировать JS
БЛАГОДАРОЧКА
Всегда, пожалуйста! Я еще пару лоадеров прикольных придумал, скоро выпущу, подписывайтесь! 😉
Отличный урок, спасибо! :)
Мужик, жму руку, огромное спасибо !!!! Держи лайкосик
тільки у вашому відео, пояснення легке і доступне!!!!
дякую
лучший!!!!!
И снова ГОВОРЮ СПАСИБО!!!!!!!!!Все очень круто спасибо !
:)
Тебе спасибо) Такие слова сильно мотивирует записывать ещё и ещё) Сейчас работы много, ремонт, все шумит. Но уже скоро буду выпускать буду часто)
Кстати набросал прикольный лоадер на css, будет использоваться одна экспериментальная штука! скоро выпущу)
@@LectorWeb Очень хорошо! Жду когда выйдет )
CПАСИБО!
Круто! Классный видос
Спасибо)
Спасибо
Видео потрясающее, все очень доступно, прям очень, сложностей в исполнении вообще нету !
НО !!! Как запретить сурол сайта во время появления loader ???
Пожалуйста, помогите 🤣
Скрол*
Нужно body задать высоту height: 100vh; и overflow: hidden; тогда высота сайта будет на высоту экрана, а потом убрать
@@LectorWeb Спасибо большое за совет, но он не помог... Пришлось подумать самому и вот что полезного вышло...
Для того чтобы убрать скролл во время появления анимации загрузки, в файле JS где написан основной код loader, после объявления переменной mask, можно сразу же объявить переменную "любое имя для переменной" которая привязана к тегу body и установить ей соответствующий класс... В CSS к классу переменной body задать стиль overflow: hidden; ...
И сразу же вывести событие связанное с body...
Потом написать полностью событие window и по окончанию события window отозвать класс у body который мы присвоили...
Как работает сие дияние...
Сразу же на сайте запрещается скрол, после начинается событие loader, и класс отнимается только после того как выполнится полностью событие loader...
👍
@@АлексейГореликов-м8ю благодарю, тоже искал, но почему-то никто это не показывает, а прелоадер со скроллом выглядит уж очень стремно
как подключить JavaScript на CPanel?
Большое спасибо!
Всегда пожалуйста! )
Полезный урок :)
Спасибо)
Спасибо!
Пожалуйста!)
спасибо!
Пожалуйста! )
у меня просто зависло и ничего не крутится , css подключен, код без ошибки всё как у Вас написано не могу понять в чем проблема
скиньте код в телеграм, посмотрю, а еще лучше архивчик
Появился еще один вопрос. Как сделать чтобы была плавность? Когда страница загрузилась, чтоб она не резко появлялась, а плавно. Знаю что такой эффект есть в анимации. и понимаю что надо или маску плавно увести или страницу плавно вывести. но не понятно что нужно прописать?
Можно body сделать прозрачность и потом ее плавно убрать через transition
@@LectorWeb если body делать прозрачным, то и маска с лоудером тоже opacity становится
@@alekseyskushali8716 Ааа, не так, тупанул, обнять весь сайт в wrapper какой-нибудь, и ему задавать а не body, а loader за переделами wrapper
На body transition попробуйте добавить
как сделать чтобы он был минимум секунду независимо от интернета?
В setTimeout прописать не 600, а 1000
А можно маске просто z-index задать? -100, например. Она и так будет скрываться.
Я вот сейчас прохожу курс по JS и там учу AJAX. Пока данные идут, то у меня ваш лоадер показывается)
Можно и так сделать! Это же не единственное правильное решение! )
Написал ваш код, мне выдаёт ошибку Uncaught TypeError: Cannot read property 'classList' of null
at skripts.js:4
Покажите весь код, пожалуйста
@@LectorWeb Код абсолютно такой же, как в видео
@@KaimanDoro Все равно покажите, так я ошибку не увижу, а лучше скиньте весь проект мне в телеграм
let mask = document.querySelector('.mask');
window.addEventListener('load', () =>{
mask.classList.add('hide');
setTimeout(() => {
mask.remove();
},600);
});
@@vlasik8084 не существует в HTML класса mask
Все получилось из видео урока, но лоадер почему-то не двигается (он застыл на месте и не крутится), а так все работает.
Проверьте animation и keyframes, скорее всего дело в этом
@@LectorWeb
Спасибо👍, но я нашел ошибку в js одну букву поставил с заглавной вместо строчной, после этого все стало работать как надо.
@@n0tapr0ff4 это важно, так как javascript регистро-зависимый язык, например переменные age и Age абсолютно разные
Добрый вечер, Алексей!
Как я понял, вчера вы не смогли выйти на связь...
Смотрели теги, которые я отправлял вам для вашего нового видео...?
Только что загрузил видео для вас, - ссылку отправил вам в личное сообщение.
Были ли вы у меня в личном кабинете сайта...?
Жду когда вы освободитесь...
Как сделать интернет медленнее?)
Открываете Chrome Dev Tools, клавиша F12, вкладка Network и там есть список, по умолчанию стоит Online, выбираете нужный вам вариант и перезагружаете страницу
@@LectorWeb спасибо
@@whicencer8819 Пожалуйста!
А как доработать чтоб в круге по центру был логотип, но так чтоб не крутился вместе с лоадером?
Как угодно, обнять в ещё один блок, сделать релатив, и в этот блок положить и сам лоадер и логотип по отдельности. Сделать их абсолютами. Лоадер будет крутиться сам по себе, логотип стоять на месте