Как сделать прелоадер? ► CSS/JS
ฝัง
- เผยแพร่เมื่อ 8 ต.ค. 2024
- Канал DWS TV: bit.ly/DWS_TV
Урок для тех, кто хочет научиться делать прелоадеры страниц.
►►► Второй канал Хауди, подпишись ;)
vk.cc/5lPADD
Человеческие цены на игры Steam и рандомы только тут - bit.ly/SteamAlm...
Хочешь зарабатывать на своих видео в TH-cam?
Подключайся! - youpartnerwsp....
#Ссылки из видео:
1) github.com/Buc...
2) robinmastromari...
► Жми красную кнопку "Подписаться" под видео :)
► Есть вопрос? - Задай его лично мне в наших группах!
===
► Наша группа ВКОНТАКТЕ - howdyho_net
► Наш Twitter - howdyho_net
#Реквизиты для донатства | Поддержи канал!
Z252920168434
R250434217196
Музыкальный трек предоставлен TH-cam Audio Library.
![[#SHORTS CLIP] ใช้ของของตัวเองไปเลยสิคะ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/Ea_mTywx2p4/mqdefault.jpg)
Канал DWS TV: bit.ly/DWS_TV
Подписывайтесь, чтобы научиться делать крутые штуки на CSS!
Хауди Хо™ - Просто о мире IT! , Хауди, почему я нахожусь в черном списке группы (Касимов Тимур, id tim4_morethannick)
Мы требуем видео урок о создании сайта с нуля!!!
Хауди сделай это для нас!
Нужно ли чтобы зарабатывать на программирование высшее образование "программиста" мне 13 я учу языки программирования но не уверен смогу ли я потом это использовать то есть примут меня куда то с знаниями но без диплома и так далее... ? О ХАУДИ ПРОСВЕТИ МЕНЯ :D
нужна внимательность, логика, фантазия и терпение, когда ты будешь делать всё по инструкции, а у тебя ничего не работает и очень много практики
нужна внимательность, логика, фантазия и терпение, когда ты будешь делать всё по инструкции, а у тебя ничего не работает и очень много практики
Спустя столько лет, а урок всё ещё остаётся на уровне.
Помоему хауди единственный человек на TH-cam у кого реально полезная реклама!
Ибро ты экстрасенс)) уже 2й раз я только начинаю искать что-то как ты выкладываешь то что нужно) спасибо)
=)
Круто!
Про document.images не знал...
Спасибо Хауди, что красиво и доступно выложил!
Рад помочь!)
Все по делу и понятно даже для далеких или любителей . Одна просьба тебе при желании выложи видео урок по доскам объявления что за что отвечает. Верхушку не прошу доклад. Сам к этой тематике не имею отношения просто хоби и подсел на твои видео единственные что не мусор. За ранее спасибо.
После видео по вёрстке от профессионала на id'ах я не хотел вообще сюда возвращаться, но этот видос в корне изменил моё мнение. Хороший формат, полезная информация, спасибо!
Дай Бог тебе здоровья и хороших честных заработков!
Не зря вам за рекламу платят!)
Действительно интересно преподнес рекламу)
Thank You Bro, Cool Video lesson)
Спасибо те Хоуди Ха
Спасибо большое Хауди! Ты лучший
Рад помочь!)
Сделай уроки по ООП PHP
Только с твоих уроков смог понять python, php знаю, но никак не могу допереть ООП, а ты хорошо объясняешь
Ну да, всё понятно, ничего сложного!
Две недели то му назад благодаря тебе я понял что это возможно и начал изучать html css Java....
Спасибо тебе за все уроки.
Хочется как то раньше быть где-то там )) хотя мне кажется что в начале ещё интереснее чем на верху😂 мучительно как то и более сложнее...
Рад помочь!)
Никогда не поздно начать.
Многие рады помочь но не всем правильно получается... мне 39 лет и я уверен на 100% что не поздно. Главное хотеть, задать себе цель, к тому же есть идея...а остальное что мне нужно благодаря твоему каналу можно получить, ну и конечно DWS TV! тоже всё адекватно и интересно... но вопросов полные карманы по ка что и ни на все Google находит ответы... так что буду мучить и доставать по не много ... 😅🙈
)))
@@TolikM Толян, как успехи? Уже тимлид?
Благодарю за урок. Только вот у меня на iPhone5S этот preloader часто не по центру почему-то показвается. Хотя код идентичен, только без препроцессоров...
а что за закорючка перед .done в css???
и как ее написать?
нашёл ответ?
Привет Хауди. Долго не мог разобраться, потом заметил что сам script в html прописываеться не в head а в body. Почему? В head вовсе не правильно вставлять скрипты или только в данном случае.
P.S. Качество контента радует - кратко и лаконично, по делу.
насколько мощен и прекрасен JS... однозначно надо занести его в достижения человечества
Хауди Хо, привет! Очень нравится твой канал. Отличная и качественная подача, так держать!
Подскажи пожалуйста, за сколько можно обучится на web-программиста и с какого периода обучения уже можно пробовать зарабатывать на фрилансе ( 3 месяца, полгода, 7 месяцев ). Заранее спасибо!
Привет.
Обучиться можно минимум за год, чтобы дойти до того уровня, на котором будешь тянуть простые заказы.
А как насчет верстальщика? С какого периода обучения можно начинать выполнять заказы?
Спасибо парень за годный контент.
Реально полезные вещи делаешь )))
С Уважением Dexter
Привет, сними пожалуйста видео про ОПП в php, как правильно пользоваться абстрактными классами, интерфейсами и третами. А то в основном в видео про них рассказывают самые основы, а применение не показывают.
¡PERFECTNO WSE!PROSTO SUPER,BLAGODARJU OT SERDCA!!!
То чуство, когда нашёл хорошийканал при 14к подписчиках, а оглянулся и уже 116к.
=) Хорошие каналы всем нравятся.
Fresh AWPCool, на минуточку, 145.000
199к :)
204)
228)
Помогите, пожалуйста
Uncaught TypeError: Cannot set property 'innerHTML' of null
at Image.image_loaded (preloader.js:18)
Что в данном уроке нужно использовать?
Хватит ли обычного js,html и css?
Или все таки нужны дополнительные библиотеки, если да, то какие?
Всё классно!!! Хауди Хо научи как сделать классную заставку при загрузке компа)
Лайк друзья, однозначно лайк!!!
Оч круто, спасибо!!!
Помогите пожалуйста
Uncaught TypeError: Cannot set property 'onload' of null
at script.js:1
Хауди, я тебя уже очень долго смотрю, сначала пользовался Notepad++, ну когда смотрел видео "* за один час". А сейчас хочу спросить, какой у тебя стоит стиль на Sublime Text?
Респект и уважуха! Спасибо.
Рад помочь!)
Без создания объекта image не работает но вопрос. Почему необходимо её создавать?
Привет, было бы интересно увидеть реализацию неточного поиска, что то типа "Возможно вы имели ввиду"
Привет Хауди, а ты когда под заказ верстаешь, ты эффекты сам на js/jq пишешь или используешь готовые плагины? Многие говорят, что 99% задач можно на плагинах собрать. И ещё вопрос. Будет ли у тебя видео про работу с отладчиком?
99% не соберёшь, не редко приходится самому писать.
С отладчиком да, планируется ролик.
Что это за специальный символ перед обозначением класса done? 09:13 Возможно ли использование таблицы стилей css вместо scss? Как записать подкласс done?
Спасибо за видео! Почему в данном случае используется CSS свойство visibility а не display ?
можно как то включить в массив картинок диви с изображениями в кач фона ?
loader не загружается.
В консоли если смотреть, то его стили даже не появляются, при этом стили preloader грузятся.
В чем может быть трабла? Gulp? SCSS? - У меня ничего из этого не стоит.
html - шаблон реально крутой
Привет, сделай обучающие видео по bootstrap за 1 час)
просто начни делать... вот сайт русский: bootstrap-4.ru
Привет. Что за плагин используется, с выпадающим списком вариаторов при вводе в sccs?
Спасибо огромное, я уж начел сомневаться в том что я тут делаю:)
Не мог бы ответить, что за SCSS или как ты его в комментах писал, и что он дает?
SCSS это препроцессор для языка CSS, увеличивающий сильно его возможности.
Ты пишешь код на синтаксисе SCSS применяя все его плюшки, а он на выхлопе даёт готовый CSS.
Хауди Хо™ - Просто о мире IT! А где его можно скачать, и как его установить?
Официальный сайт sass-lang.com, про установку и обзор у меня позже будет ролик.
Хауди Хо™ - Просто о мире IT! Спасибо за все, Продолжай делать ролики, удачи:)
Рад помочь!)
Хауди привет!!
Хай
DWS тебе заплатили, или это твой партнёр? (я подписался на их канал:D)
Просто хороший знакомый, + у него ценный контент.
Хауди Хо™ - Просто о мире IT! годный контент всегда приветствуется
Uncaught TypeError: Cannot read properties of undefined (reading 'contains') что делать?
почему анимация прелоадера лагает в хроме, но норм работает в мозиле?
Привет, скажи, а чем отличается SCSS от обычного css? Зачем им пользоваться? Почему не используешь Sass? Я уверен ты знаешь о нем, расскажи какие минусы?
В будущем будет ролик о нём, небольшой.
SCSS - это и есть Sass
Буду ждать, очень любопытно) Спасибо.
спс за бро мне помог. не хочешь сделать уроки про JAVA?
Почему ты создаешь "клон" картинки, а не используешь просто images[i].onload и т.д.?
Anton NoSOname , IE не поддерживает.
Привет. Сделал тоже самое. И когда перезагружаю страницу, что бы посмотреть, сначала с самого видно весь сайт, потом плавно появляется наш fixed div и потом так же плавно пропадает. Как убрать то что бы с самого начала не было transition а при закрытии был?
Хауди, вопрос, сделал js всё как на видео, но не понимаю чего не работает функция, выбивал в console.log всего изображений 39, загруженных = 0, если не сложно, можешь помочь?
Не исчезает preloader помогите.
Наверное уже поздно, но если все еще нужно, то попробуй изменить document.body.onload на window.onload
@@druxavoron или просто убрать значок & у класса done.
@@druxavoron я попробовал это, так и не помогло
@@imintegralmusic5501 КРАСАВА!! СПАСИБО ОГРОМНОЕ!!!!
привет! как думаешь,в 30 не поздно начинать постирать программирование??? (спасибо за ответ) 😊
Не поздно, главное желание
Код не рабочий, при условии, что я подчистую списал у тебя! Сайт прогружается, как будто прелоадера и нет! При этом все файлы подключил, синтаксис не нарушен! Просьба: скинь код в оригинале
Хауди, посоветуй, пожалуйста, какую-нибудь литературу связанную с веб-программированием, для начинающих, заранее спасибо тебе.
Книги и курсы у нас в группе vk.com/topic-84392011_32960213
Хауди Хо™ - Просто о мире IT!, спасибо
скажи пожалуйста как ты добавил карту кода в атом? справа как в sublime?
Спасибо за урок! Плохо только, что счетчик процентов загрузки страницы слишком быстрый, практически моментальный..
Почему надо обязательно создавать копию Image с помощью new Image() и вещать функцию на онлоад и онеррор. Почему нельзя написать
for (let i = 0 ; I < total_image_count; i++) {
images[i].onload = image_loaded;
images[i].onerror = image_loaded;
} ???
у меня на мобильной версии, именно когда каждый раз вставляешь заново ссылку на мой сайт, то появляется этот бэкграунд с задержкой, не моментально, будто с opacity: 0.5; на opacity: 1; посмотрел в коде ничего в скрипте не задано анимацией, сам скрипт задавал в js без "загрузки страницы"
Скажи, пожалуйста, какая тема у Sublime Text?
Какая тема Sublime Text 3?
Отличный урок! Но гифки с прелоадером по указанному адресу уже нет. Может осталось у кого ребят?
Подскажите: что за класс .done Вы используете в сss? и что это за символ перед ним? повторил код у себя, но прелоадер так и не гаснет...
Сам незнаю
ето просто не css а scss
Хауди на чем делать адаптив: резиновый сайт (но по-моему это не оч ) или медиазапросы или сетка на bootstrap или еще что-то
Медиазапросами.
Сетка в Bootstrap это просто набор готовых медиазапросов и колонн.
Лично я использую и медиазапросы и bootstrap )
что делать если у меня все картинки заданы через background в css? ПРоблема в том что скрипт их не видит. Или их нужно передеть под тег img?
Круто
Подскажите, пожалуйста, как использовать SCSS в проекте?
а можно как-нибудь сделать,чтобы на мобильных устройствах js файл не открывался, то есть с РС допустим грузит прелоадер, а с мобильного даже не залазит в этот js файл?заранее спасибо
поч когда скрипт подключаешь просто не прописываешь в него defer тогда можно в head засунуть чтоб всё по красоте.
Хауди а как вы через еммет подвигаете столб в право или в лево ??
Нет, это возможность Sublime Text 3
Привет. Не мог бы ты сделать видео на тему, как редактировать уже залитый сайт в интернет. Заранее спасибо)
Хауди, что ты думаешь о курсах, типо Geekbrain?
Я о них обзор делал th-cam.com/video/ZwpOPC7H9Uc/w-d-xo.html
@@HowdyhoNet видео не доступно(((
круто)
почему ссылка ведет не на канал а на сушибар в краснадаре?
Не совсем понял что в цикле происходит :) Объяснить плз
*Хауди сделай видео как сделать чат на сайте!*
Привет,хауди! Меня достала реклама на сайтах,можно ли заблокировать?(какими прогами пользуешься ты,что посоветуешь?) прочитал что можно удалить вредоносные программы через "MRT.ex" которая в папке виндоус сидит(стандартная прога)что скажешь ?
Можно на сайтах при помощи AdBlock, либо при помощи AdGuard.
А такую программу как MRT.exe что можешь сказать о ней?
Не слышал о такой
9:13 у тебя там &.done? Или что за значок? Сорян за тупой вопрос)
class="preloader done"
Как сделать так, чтобы пользователи не смогли выделить и/или скопировать какой то текст?
Konstantin Naumov спасибо за помощь
Konstantin Naumov, если применить "user-select: none;" можно ли скопировать текст с помощью F12?
John Casius с помощью F12 можно сделать очень многое... Вернее почти всё, кроме серверной стороны( пароли SQL, просто какие-то данные)
можно на js сделать
function noCopy(event) {
event.preventDefault();
} document.body.addEventListener("mousedown", noCopy);
отменяет событие можно и на даблкликпоставить, и для опр элементов назначить и там не будет выделение работать
в гугл тяжко написать?
Ребят я не очень уловил про класс &done -это получается класс в классе, который отвечает за действие? Если да, то не понял каким образом preloader понимает что пора использовать класс done? Дело в том что я не могу описать в классе preloader класс loader и done, у меня они не засчитываются, может дело в том что я не использую gulp?
&.done в данном случае это всё равно что .preloader.done
Спасибо, у меня уже всё получилось)
используй atom или vscode на linux
Привет! Очень хорошее видео. Я вот ищу информацию как бы сделать слайдер из фона. То есть, пример: Есть 5 картинок, они для фона сайта, и нужно чтобы они плавно уезжали в бок, то есть, показана первая картинка на фоне, проходит 5 сек, она уезжает плавно влево, а за ней стразу же вторая приезжает и так по кругу. Листались чтобы автоматически. Как реализовать? С JS или без - без разницы. Буду очень благодарен за помощь.
Ты нашел способ ?
@@roflan_prostreamer 5 лет назад это писал, уже не помню зачем 😅
@@АртёмСимонян-ж6е понял)
сделай видео про Big Data
Такая проблема , в css файле
.preloader{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
z-index: 2;
transition: 1s all;
opacity: 1;
visibility: visible;
}
.done{
opacity: 0;
visibility: hidden;
}
.loader {
width: 75px;
height: 75px;
border: 10px solid white;
border-radius: 50%;
border-top-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: 2s spin infinite linear;
}
loader и done работают только в таком виде , но тогда не работает js скрипт , как решить ?
.done должен быть привязан к .preloader.
А вообще показывай через JsFiddle
вот и вопрос как его привязать
jsfiddle.net/y77vqp93/1/
kakoy simvol pered .done ?
точка
net est simvol no ne mogu nayti pered . done
Го уроки NodeJS :)
@keyframes spin {
from кючевое слово здесь не подсвечивается в нотепад++... но все работает. в чем фишка?
Потому что относительно того что я человек
где можно взять код?
Ребят, подскажите пожалуйста почему срабатывают функции image_loaded, если мы только передаём их тела но нигде не вызываем??? Хауди спасибо за видео, надеюсь ты как-нибудь покажешь как подключать scss файлы)
Их тела вызываются в определённый момент времени, в данном случае тогда, когда изображение будет загружено полностью.
Всё, разобрался! Спасибо Хауди!
А где видосики! Уже почти месяц нет!
Привет, хауди, я значит вроде все написал сам, только в jquery и написал вместо onload - ready, оно срабатывает, но по построению дома, а не загрузки всех элементов страницы, переписал на js, работает, но на ротлинге дичь, через раз работает, поставил вместо document.body - window, заработало, в чем может быть проблема и что это такое?)
На jQuery будет так $(window).load(function() { тут код });
stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat , я также писал, только не window, a document, а потом загуглил и оказывается с jquery 1.8 ".load" нерекомендуемый. Нужно писать .on("load",....
спасибо, что ответил)
Ну или так :)
Помогите! Что мне делать, у меня в Network нету Regular 3G
а как убрать скролл в
загрузочном окне ?
после добавления данного скрипта сама страница становится не кликабельной, т.к. у прелодера z-index = 2, предлагаю добавить строку после IF
preloader.style.zIndex = '-1';
а лучше удалить его со страницы, с помощью innerHTML например.
Думаю многие рискуют зря потерять время.Слишком много людей идут в IT..Конкуренция для того чтобы устроиться на работу растет не по дням а по часам.
+Bek Bekov Качество убивает любую конкуренцию.
А где гифку то брать что на прелоадер фоне?
Ссылку из урока перепиши.
Не появляется GIF изображение, что делать?
а как отключить скролл, здесь в примере фуллпейдж сайт скрола нет, а у меня скрол есть как отключить?
body {
overflow: hidden;
}
Он понятно объяснил, но настолько быстро, что новичку воооообще не получается с 1 раза сделать