Уроки jQuery практика- делаем Skill bar для портфолио
HTML-код
- Опубликовано: 9 фев 2025
- Мы продолжаем уроки jQuery практика и в этом видео мы делаем Skill bar для сайта портфолио. Вы часто можете увидеть такое jQuery решение на многих сайтах веб студий и фрилансеров. Уроки jQuery практики направлены на работу с jQuery примерами и личной прописью с полным пониманием их.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Сколько же годноты я вижу на этом канале! 😎
Спасибо! Дальше - больше! Подписывайтесь и рассказывайте о канале друзьям!
Ты очень хорошо объясняешь! Всё доходчиво и понятно!
На данный момент самый топовый канал в своей среде!) Спасибо тебе! Лукас
Приятно слышать! Спасибо!
Отличный канал. Смотрю с удовольствием
Молодец! Отличное видео. Большое спасибо!
Thanks for knowledges.
О, Круто! Для браузерной RPG пойдет =) Еще бы пример боевой системы на JQuery =)
например?
В стиле Героев Меча и Магии =) Многому обучит, например: строить Сетки, взаимодействовать с ячейками "drag and drop", хранить данные (массив или список), расчет событий (удар-блок, ход AI) и прочее. Да и к тому же, интересно.
Также можно взаимодействовать с data-* атрибутами методом jQuery .Data().
Пример для получения значения "процента":
var width = $(this).data('percent'); // (без префикса "data-")
Такая запись будет компактнее и удобнее, ИМХО.
Кому как
не знал. действительно полезно. спасибо !
круто!
Алексей Шадов прикольно будем учить матчасть. Спасибо
jQ - круто, полезные вещи, хотелось бы увидеть материальчик по сравнению препроцессорных сеток, а то никак не могу остановиться, все нужно пробовать
Например каких?
Susy, SmartGrid, препроцессорный bootstrap выбор стоит между ними, но если есть лучше варианты буду рад услышать предложения
Привет, спасибо за твои видео!!! У меня проблема. (Firefox) background у .skillbar-bar отображается тем цветом, который указан в CSS файле, а не в атрибуте div с классом skillbar-bar. Проблема только в лисе, в остальных браузерах всё работает!
@import url(fonts.googleapis.com/css?family=Open+Sans);
Автор, ответь пожалуйста, где работаешь, в каких технологиях разбираешься? То что делаешь это конечно круто, но хотелось бы что-то посложнее, возможно изучение реакта или ангуляра в твоей подаче. Планируешь что-то подобное?
Привет Егор, обещал рассказать это когда на канале будет 100 000 подписчиков! Реакт и ангуляр будут! Только нужно время!
Web Developer Blog довольно сложно набрать такую аудиторию с таким специфичным контентом, 100к веб девелоперов в русском сегменте трудно найти, ты бы мог развиваться и учить людей тому что учишь сам (новые технологии, какие-то) , да даже обычный пересказ документации с пояснениями крайне полезен тем, кто не шарит в техническом английском. Цель это здорово, но объективно ждать пока наберёшь аудиторию большую... На смену реакту уже что-то придёт))
Да, планирую развиваться! Сейчас учусь делать приложения для ios так же думаю по unity сделать что то(хорошо просмотры набирает)
Web Developer Blog я имел в виду в сторону frontend разработки
Привет смотрю твоё видео год спустя , скажи могло что-то измениться координально в jQuery , что он может не работать в 2018г?
Спасибо большое за уроки! А будет ли урок где создаются модальные окна, причем на каждую ссылку своё модальное окно? Просто интересно)
Могу сделать)
О, было бы отлично! Заранее благодарю!)
По-моему это слишком уж просто, 3 строки кода всего нужно, отслеживаешь клик с помощью метода click () по кнопке, дальше выбераешешь блок с модалкой, который позиционирован фиксировано и с з индексом, делаешь для него например toggle() показывет или скрывает обьект и на кнопку с крестиком тоже самое, вот и вся модалка
Можешь рассказать как ты учился?
Можно ещё сделать видео, про фильтрацию/сортировку? Что то на подобие mixitup.
Подумаю над этим
Ждём урок по Lazy Load, чтобы работала при скролле))
Так мало кто делает. Слишком большая нагрузка на браузер)
спасибо за видео
А вам спасибо что смотрите!
Все круто!
Спасибо!
Есть вопрос.
На приме у меня это все в табе находится.
Анимация идет сразу после загрузки страницы, а не после открытия таба. Можно как то пофиксить?
То есть таб открывается по дефолту?
Web Developer Blog нет. В том то и дело.
Web Developer Blog таб второй по списку
Skip Tyler попробуй просто вызов функции, которая отвечает за прогресс бар поставить по клику
Егор Миронов ок. Спасибо. Попробую.
Завтра покупаю macbook air 2016 только для программирования. До этого работал на виндовсе. Вы как пользователь мака что можете сказать об этом? Сложно ли перекинуться с виндовс на мак? Нужно много языков для программирования. Не только веб.
За неделю привыкнешь к macOS и будешь после ненавидеть винду, для программирования macOS отлично подходит. Macbook Air сам по себе очень сомнительный, скорее для серфинга, лучше Б/У прошку взять
Я долго привыкал к мак ос, где то недели две. Непривычно все, от закрытия окон( кнопка крестик теперь слева, а не справа), до работы с файловой системой. Но потом вникаешь и начинаешь совсем по другому относится к данной операционной системе! Мне нравится! Всем советую!
Ну у меня Air, для всех моих задач подходит идеально, даже для рендеринга видео. Все загружается быстро и не глючит. Конечно с про версией было бы лучше, но мне хватает)
По производительности air вполне хорош, а вот экран беда. Возможно это у меня слишком завышенные требования после прошки, но к экрану air испытываю отвращение
Допустим скилбар почти внизу страницы. А анимация происходит при загрузке. Как сделать что бы анимирование происходило при прокрутке до нужного места (скилбара). Потому что если он загружается вместе со страницей то когда прокрутишь к самому скилбару то он уже будет загружен. Как пофиксить ? В топ. нужная штука
я я не могу у меня нет слов лайк
Спасибо за урок.
width я бы не стал анимировать, если хотите держать хороший FPS
Если это сайт портфолио и нагрузки не сильно много, то все нормально)
Согласен, но не лучше ли сразу показывать лучшее практики? Тем более там всего то надо поменять width на transfrom
Подскажи, как это сделать, пожалуйста
codepen.io/wsjs/pen/GvYmqp?editors=0010
У меня анимация идет с право на лева , а не с лева на право,подскажите как это исправить я буду очень благодарен
не плохо бы результаты урока на гитхаб заливать ;)
Суть в практике, что б вы сами тоже писали)
Мужик спасибо большое. Но плыз делай все паралельно или по кусочкам. Например не вот сходу написали js или css файл и в конце показываешь что все работает, а например в 2 окна открыть. Повесить watch и что бы люди видели как меняется постепенно програмка. А то так сходу бах и вот не совсем понятно.
Спасибо что смотрите! Мне так намного удобнее(.. Пишите вместе со мной параллельно у себя на компьютере и проверяйте каждый шаг, так ведь удобнее. как вариант)
а у меня вопрос а разве у дивов по умолчанию не дисплэй блок ?так как это блочный элемент
если див пустой, то дисплэй нон, если в див есть текст или картинка то блочный
все сделано как на видео но почему то не работает(
такая же проблема
а как такое же для окружности сделать
Думаю для этого можно использовать SVG изображения и манипулировать значением "stroke-dashoffset" в скриптах в зависимости от процентов, которые в свою очередь указаны в дата атрибутах родительского блока)
Сделаю видео и для окружности!
все как на видео сделал, но $jQuery код не работает, и ошибки не выдает
смотрите ошибки в стилях)
мне кажется такое можно на CSS анимациях сделать
Сделай!
Paco Official Ахах)), ты как я погляжу официальный хейтер этого канала?)), под каждым видео твои претензии замечаю, сам я особо не шарю, делаю первые шаги, и подписался на кучу каналов с подобной тематикой, включая этот, и скажу тебе, этот чувак реально доступно излагает имхо))
Какой-нибудь markdown редактор текста с просмотром результата
зачем?
Судя по графику html для тебя самый сложный?)
Конечно, если вам не понятно что числа я для примера поставил...
за автора - fonts.googleapis.com/css?family=Open+Sans
Спс
не делайте себе такие ПОЛОСЫ ))) что значит JS знаю на 30% а HTML на 90? ))) это тупо попросту в % считать
Никогда не встречал такое?