Уроки jQuery практика- как сделать parallax для сайта
HTML-код
- Опубликовано: 28 сен 2024
- Мы продолжаем уроки jquery практика и в этом видео я покажу на примере jquery как сделать parallax эффект для сайта своими руками. Уроки jquery практики предполагают ваше личное написание кода что бы в нем разобраться. Практика jquery с моим объяснением проходит легко, быстро и ненавязчиво. Parallax эффект для сайта выглядит очень стильно и интересное решение, которое нужно знать как сделать. Уроки 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
========================================================
Clouds
i.imgur.com/WYfbo0O.png
Trees
i.imgur.com/4JOfJhg.png
Grass
i.imgur.com/h0aXbZr.png
Buildings
i.imgur.com/5LmAigM.png
почему этого видео нет в плейлисте Уроки JQuery практика?
Нет CLOUDS, скинь пожалуйста или укажи в чем ошибка в ссылке...
Тут всего 2 из 4 ссылок.
Вы просто переписали формулы в блокнот, а где их объяснение? почему 0,5 минус половина экрана и т.д... где наглядное объяснение как фоны будут сдвигаться, чтоб эти формулы можно было самим в голове воспроизводить после понятия процесса?
Это снова я. :) Посмотрел с огромным удовольствием, спасибо за такой контент и за качество его изложения. :) Я обычно такие вещи описываю со всякими "эээ", "аааа", "мммм" и т.д., что неистово бесит и меня самого, и окружающих. В общем, поражает воображение, как Вы пишете код строка за строкой, практически ничего не забывая. Я скажу так: приятно равняться на такого человека как Вы. Удачи в IT-сфере ещё раз, не дрейфьте. :)
Спасибо!
Привет. Слушай подскажи может знаешь что-нибудь по этому поводу: сделал паралакс на фон, эффект схожий на background-attachment: fixed только на пару пикселей отстаёт от прокрутки. Делал и через .css(), и через .animate(). Столкнулся со следующей проблемой, когда прокрутка осуществляется попиксельно, то есть на мышке с колесиком либо же на якорьных ссылках через анимацию тоже, все супер, но когда скролю на трэкпеде или на тач устройстве чуток подлагивает.
Буду признателен за ответ.
Спасибо за уроки!
Нужно смотреть
works great for me, thx :)
Можешь випустить видео по верстке?
Да, могу)
jQuery - ест ресурсы устройства мама не горюй и для мобильников его лучше вообще не применять или отключать, если это не ПК.
Нужно делать точно не на jQuery, если брать в внимание мобильную разработку сайтов.
Так то конечно весело, бегает, крутится. А когда дело доходит до дела ничего не работает 😏
годный контент, хорошая дикция. спасибо, однозначно лайк
Хорошо, ты только второй человек по тавтологии, иди дальше, рекорд принадлежит моему преподу, 87 раз "как говорится" \ пару. В принципе как-то так.
Буду признателен если кто то объяснит от куда взята формула: 0.5-е.pageX/w. От куда мы берём цифру 0.5. Зачем мы от неё отнимаем правую часть. И зачем делим положение курсора на ширину w?
я не понимаю почему у меня не работает.... 2 раза тоже самое написал. даже облачков нету
спасибо, всё работает
По-моему, отличным вариантом будет писать стили на препроцессорах (лучше scss). Так ка многие сначала учат их, а потом уже jquery. Если не знают scss, то для них это
будет отличной практикой
Возможно, но мне кажется новичкам так будет понятнее, не каждый же может scss использовать, а в каждом видео объяснять банальные вещи тем кто ничего не понимает - не очень круто.
А что тут на препроцессорах писать? Ты напишешь ровно столько же такого же кода.
Подскажите пожалуйста, очень надо, каким образом сделать только горизонтальный parallax? Убирала var h = $(window).height(); и var offsetY - parallax перестает работать.
Заранее благодарна.
большое спасибо \ и это без подключения лишних библиотек которые сильно большие по памяти
впервые вижу такое количество рекламы за столь короткое время
У Вас при наборе в CSS высвечивается окошко с подсказками. Подскажите плагин, который это делает. У меня emmet стоит, но такого окошка с подсказками нет. Вот скрин со списком установленных плагинов yadi.sk/i/GzTjwUmb3MQAUH
Заранее благодарю.
P.s.: За уроки большое спасибо!
+Василий Свистунов у меня есть отдельное видео про плагины которые я использую в Sublime text - посмотрите)
Спасибо! Отличный урок, все получилось. Но на FireFox все элементы резко улетают вверх за пределы экрана, а на Яндекс, Хром и Опера все хорошо. Не знаете в чем может быть дело?
Валидатор ошибку выдаёт Line 19, Column 22: there is no attribute "DATA-OFFSET"
Контент годный. Но с рекламой явный перебор, не находишь?
12 минут видео, 6 рекламных роликов. Даже ТНТ такого не делает.
Эх, ну везде сейчас реклама, что поделаешь. Подобного контента нигде нет. Я же бесплатно для вас это делаю!
adblock?
ну чувак, сделать серию роликов и повесить ценник, зато без рекламы или выложить в открытый доступ, но с рекламой, к тому же если воткнуть адблок, вся реклама пропадает
те у кого нет адд блока смотрят сразу за десятерых хД
Что то вообще ни как. codepen.io/Kirke/pen/aqXQgL
Да очень хорошие и полезные видео, особенно практики. Спасибо за ваш труд
Спасибо большое! Доходчиво объясняешь (хоть и быстро)
Практические примеры, круто. Может сделаете видео как на jQuery сделать горизонтальное выпадающие меню(Как в инт. магазине типу rozetka и can.ua). Особенно интересует, как при перемещении курсора по диагонали, оставаться на выбраной категории.
Может сделаю, пока в планах доделать то что уже задумал)
Привет ! Может расскажешь как сделать полноценную галерею с альбомами и возможно реализацию всего этого на сервере с БД ?
+Land Rover может быть. Не обещаю
У меня все получилось) спасибо!
Можешь сделать урок по калькулятору цены или какой то фильтр, что то подобное на jquery?
+Артур да
А можно ли сделать,что событие mousemove выполнялось только в определенном блоке?
По идее да. Тогда используешь не e.pageX/Y, а e.offsetX/Y. Это свойство берет координаты от начала DOM элемента, по которому произошло действие
Объясните кто-нибудь вот эту строку: var offset = parseInt($(el).data('offset'));
Мы получаем значение атрибута data-offset, которые прописали в html
все круто, хотелось бы еще увидеть эффекты при скроллинге без сторонних плагинов )
+Information Technology спасибо, но наверное делать уже не буду
Какого года у тебя мак?и что лучше взять мак 2011-2012 года или ноут на Винде и поставить хакинтош или юзать Винду?
У меня Air 2016 года. Бери мак 2012 года!
Web Developer Blog А разрешение для верстки нормальное,или все же будут проблемы?
+Yolka Games нормальное
привет почему у меня ничего не работает ?
$(window).on('mousemove', function(e) {
var w = $(window).width();
var h = $(window).height();
var offsetX = 0.5 - e.pageX / w;
var offsetY = 0.5 - e.pageY / h;
$(".parallax").each(function(i,el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(" + Math.round(offsetX + offset)
+ "px," + Math.round(offsetY + offset) + "px, 0px";
$(el).css({
'transform':translate
})
})
})
вроде всё верно но все равно не работает, браузер яндекс
у тебя стоит offsetX + offset,
а нужно offsetX * offset
спасибо
Понимаю что не по теме но не мог бы ты расказать какми программами пользуешься на своём мак?)
Ну и например пользуешься ли ты такой программой как CleanMyMac, и почему
Да, сделаю видео отдельно!
Спасибо! Буду ждать.
Что на счет игры "Крестики - нолики" на jQuery?
+Александр Красников я сделаю игру по интереснее, ждите!!! На днях будет!
Парень, Спасибо тебе огромное!
Спасибо что смотрите!
Скажи плз свое мнение о pug (препроцессор для html). Уроки по SASS твои посмотрел и вроде оч клевая тема и надо юзать, а вот посмотрел у другого человека о pug и неоднозначные мысли, надо ли себе мозги таким парить? потому что выглядело как египетские символы) Интерестно что Вы думаете по этому поводу)
Не использую
а как ты html пишешь? например есть 10 страниц и на каждой есть навигация и футер, на 10 html файлах копируешь один и тот же текст?
Дима Наздратенко есть Vue и компоненты
Где и каким способом ты учил JQuery?
+ProodЪ First по документации)
Круто)) подписка, лайк, респект.
Круто! Спасибо!
Годнота, спасибо, пригодится)))))
Будете уметь
Ура паралакс!
Ахахах
Интересно?
Web Developer Blog весьма интересно, буду пробовать паралакс скролинг
Спасибо за Ваш урок. А что за атрибут data-offset?
Для изменения положения
Это пользовательский аттрибут, с которым в дальгейшем можно работать. Вы можете назначать любой аттрибут data-*="", в который можете "положить" всё что вам необходимо
Спасибо)
здрaвствуйте. во-первых спасибо, )) но а потом data-offset что то не работает
как так не работает?
1-in menu
2-rd menu
3-rd menu
4-rd menu
5-rd menu
Third div
Forth div
Fifth div
вот это мой index.php
$(document).ready(function(){
$("#1").on("click", function() {
$("html, body").animate({scrollTop: 0}, 1000);
return false;
});
$("#2").on("click", function() {
$("html body").animate({"scrollTop":$("#2-1").offset().top}, 1000);
return false;
});
$("#3").on("click", function() {
$("html body").animate({"scrollTop":$("#3-1").offset().top}, 1000);
return false;
});
$("#4").on("click", function() {
$("html body").animate({"scrollTop":$("#4-1").offset().top}, 1000);
return false;
});
$("#5").on("click", function() {
$("html body").animate({"scrollTop":$("#5-1").offset().top}, 1000);
return false;
});
$("html body").on('mousemove', function(e) {
var w = $("html body").width();
var h = $("html body").height();
var offsetX = 0.5 - e.pageX / w;
var offsetY = 0.5 - e.pageY / h;
$(".parallax").each(function(i,el){
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * ofsset) + "px, 0";
$(el).css({
'transform':translate
})
});
});
js file
});
но а data-offset дольжен принять такой цвет какой у classa, но отображается как простой текст;
Очень интересная и познательная эта серия уроков)) может сделай урок по scrollmagic?
Подумаю
Очень интересная и познавательная серия уроков после которых нужно лезть в комменты и искать рабочий код, несмотря на то, что переписал всё в точности.
все быстро, коротко, без лишней болтовни. Очень нравятся ваши уроки
Спасибо! Стараюсь!
спасибо за видео не обращай внимание на вреден :)
очень нравится, уверенный спокойный голос, все по теме, подробно поясняешь, годен в учителя ))
Спасибо! Стараемся!
и еще раз лойс спасибо за уроки
Спасибо вам