Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно
Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.
Возможно кому-то поможет. У меня не работала анимация, потому что не заметил в самой первой строчке у себя ошибку: перед '_anim-items' должна стоять точка, либо должно быть написано div._anim-items
видео наверное полезное для тех кто только начинает изучать фронт. Но даже в этом случае лучше бы сказать что так делать можно но не желательно. Потому что есть Intersection Observer API
Один я заметил, что постоянно меняются имена классов и в принципе код? Как все пишут, что всё отлично Переписал код буква в букву - ничего не работает Возможно как раз из-за того, что каждый раз показывается разный код Не знаю специально это или нет
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Перепроверил 10 раз но класс _active так и не добавлялся..нашел проще решение..если кому интересно... function reveal() { var reveals = document.querySelectorAll(".reveal"); for (var i = 0; i < reveals.length; i++) { var windowHeight = window.innerHeight; var elementTop = reveals[i].getBoundingClientRect().top; var elementVisible = 150; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("scroll", reveal);
Только у тебя тут класс не убирается после прокрутки ниже элемента, я немного подкорректировал и оставил свои комменты (может кому пригодится). function reveal() { var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) { var windowHeight = window.innerHeight; // высота окна страницы в браузере (viewport) var elementTop = reveals[i].getBoundingClientRect().top; // высота от верха окна страницы в браузере(viewport) до верхнего края элемента var elementBottom = reveals[i].getBoundingClientRect().bottom; // высота от верха окна страницы в браузере(viewport) до нижнего края элемента var elementVisible = 150; // высота появления элемента при скролле в viewport в пикселях, короче когда элемент при скролле влезет в окно страницы(viewport) на 150px то ему присвоится доп. класс. Можно и без переменной обойтись, просто вместо неё значение писать типа ( if ((elementTop < windowHeight - 150) && elementBottom > 0) ) // ветвление, которое присвоит класс элементу в диапазоне от его появления в окне страницы в браузере до его выходи из окна при скролле if ((elementTop < windowHeight - elementVisible) && elementBottom > 0){ reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } }
8:46 11:54 не анимировать когда скролишь вверх 13:30 анимация текста при скроле 15:39 17:33 анимация изображения + текст 19:32 поочередное появление (комментарий для себя)
Тем кто пишет в scss будет полезно.Если есть какие-то предложения или коррективы по миксину - пишите :) @mixin scroll-appearance($X, $Y) { transition: all 1s ease-in-out 0s; transform: translate($X, $Y); opacity: 0; &._active { transform: translate(0px, 0px); opacity: 1; } }
Подсказка не большая, можете не проверять на > 0 а просто записать aniItems.length и все, JS движок проверит, длинна массива не falsy ли значения. А falsy значение это null,false,true, 0 как раз наш , 0.0, -0.0, пустая строка.
Огромное спасибо за доступный и бесплатный формат подачи, и то, что осталось на русском языке из материалов. Очень надеюсь и жду, когда все хорошо закончится для Украины и украинцев. Жаль, что русскоязычный сегмент потерял такого талантливого блогера. Мира и процветания тебе, твоей семье и твоей родине.
Женя, видео класс👍💪. Очень полезное. У меня есть к тебе такой вопрос: мне 15 лет и я изучаю вёрстку и знаю html, css, препроцессор scss, немного gulp и другие технологии по типу git, npm и так далее. Но я хочу стать фронтендом и для этого мне нужен js и я его изучаю но я его трудно осваиваю. Мне все же продолжать изучать js в 15 лет? Или есть другие решения по типу изучение лучше вёрстки и потом когда буду старше начну js изучать. Интересен твои совет ;)
Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
у мене працює лиш перший екран, якщо прогортувати до параграфів з текстом то нічого не працює, у мене все як і у тебе. В сафарі спрацює анімація блоків якщо дьорнути трекпадом в стінку, тоді запрацює анімація, по інакшому зовсім ніяк
может, кто подскажет, зачеркивает pagey/хoffset, пишет, что это устаревшее значиение от scroll y/x, но когда заменяю page на scroll все равно ничего не работает(
Добрый день) Уже раз с вашими материалами работаю. Хочу сказать огромное спасибо за действительно содержательные видео. Возник вопрос по данному видео. Не работает у меня ничего( И никак не могу найти ошибку.
16:08 - в этом месте не совсем понятно зачем эта строка - ._anim-show ._active (если _anim-show, тольлко у параграфа), и без нее все работает, пишем только - ._active ._anim-show { ... }
А как сделать, что бы можно было так же видео воспроизводить, пока крутишь колесо, видео работает, перестаёшь крутить, становится пауза, в интернете толком не нашел(((
Для тех у кого почему-то не работает, как у меня сделал следующее: if ((window.scrollY > animItemOffSet - animItemPoint) && window.scrollY < (animItemOffSet + animItemHeight)) { animItem.classList.add(`_active`) ну и тут поменял тоже, но вроде не ругалось на эту часть кода let scrollLeft = window.scrollY || document.documentElement.scrollLeft let scrollTop = window.scrollY || document.documentElement.scrollTop. После чего наконец таки всё заработало
Благодарю, хотел понимать как происходит эта анимация при скроле, а не просто использовать готовое решение без осознания. Есть загон у меня вот такой , я не могу использовать библиотеку, которая предоставляет готовое решение, если я не понимаю как она работает, придумать причину по которой я так думаю я тоже не могу), шиза)
Спасибо. Мне урок понравился. Нет обычного твоего наигранного ютубного - эгэгей!!!, -...погнали!!!, -... замечательно!!!. Извини это обычно не круто) (Хотя в уроке про адаптивный текст, это было искренне, я почувствовал что ты был на самом деле очень рад, в остальных всех уроках - "не верю") Интересно было бы посмотреть как сделать подобную функцию для анимации более гибкой, например как magicscroll, хотя бы примерно))) В общем годный контент. Спасибо!
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы. Отдельно благодарю за качество монтажа, это просто нечто)
Привіт, підкажіть, будьласка, де я могла зробити помилку. В мене скрол ще на другому блоці, а в третьому блоці з фото вже з'являється клас _active, поки я до нього(блока з фото) до скролюю анімація пропадає(((( ????
Намагаюсь повторити код. Отримав наступне повідомлення в VS Code: var pageYOffset: number @deprecated - This is a legacy alias of scrollY. 'pageYOffset' is deprecated.ts(6385) lib.dom.d.ts(17709, 5): The declaration was marked as deprecated here.
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
Конечно не в тему. Странная ситуация случилась. Не знаю баг ли это вот хотел узнать встречалось ли тебе такая ситуация. Ничего не обычного обычный блок в котором 3 блока с h1 и p. На этих 3х блоках установлены свои картинки через bg-image. Дальше магия.
............. блок с картинкой без заданных размеров растягивается по контенту это и понятно. h1 имеет margin. Так вот этот margin делает отступ не относительно контейнера в котором находиться, а выходит за его пределы. Как только ставлю border: 1px solid black на блок с картинкой, то картинка растягивается по border, убираю по верхнюю часть h1
По моему, ты перемудрил с математикой рассчета точки добавления класса ._active. Функция offset - не нужна, достаточно el.getBoundingClientRect().top проверять, не меньше ли он ли он window.innerHeight - el.offsetHeight / 4. Обрамляющий прямоугольник ведь дает в абсолютных координатах, относительно начала координат видимой части окна. Если топ елемента будет 100 пикселей при прокрутке 0, то при прокрутке на 1000 пикселей он станет -900. Также, если елемент ниже видимой части екрана, его топ будет больше высоты экрана и он будет уменьшаться по мере прокрутки страницы. Вот тут-то мы его и поймаем, когда докрутим страницу до элемента, его топ станет меньше высоты окна. Это я навскидку прикинул. Надеюсь, ничего не путаю.
варианты событий: Что продуктивней? 1. добавлять везде класс с opacity и translate и убирать класс в нужный момент 2. везде добавлять opacity и translate и применять класс который переопределяет эти свойства
есть массив названий стран на русском (прим.) 250 эл. массива в JS. Делаем вывод через JS => SELECT -> option в итоге: в одном браузере 85 элементов показывает, в др. 187. В чем прикол, как сделать все и везде?
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
Что делать если я задал элементу свойство "transform: translate(0px, 120%);" и он у меня вылазит за сайт и появляется скролл на право и белая часть сайта?
подскажите пожалуйста, ато сам никак не доеду)) Поставил я анимацию на элементы слайдера. Вопрос: как сделать, чтобы анимация начинала выполняться в момент загрузки слайда? Сейчас получается, что анимацию можно увидеть только на первом слайде, так как она выполняется одновременно на всех слайдах. Спасибо.
А Вы случайна не знаете как сделать чтоб элемент анимировался только при прокрутки страницы? Ну например прокручиваю я страницу вниз и он анимируется в одну сторону, а если прокручиваю страницу вверх то анимация объекта проигрывается наоборот? Вижу часто такую фишку на Лебедевских сайтах но вот сделать такое не получается.
Как всегда всё супер!) Большое спасибо) Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
Жека, привет! Спасибо за уроки! Устроился на работу, но тут толи безопасность все режет напрочь, толи еще что , но не открывается твой сайт со шпаргалками((( (причем служебной страницы блока нет, а: Status Code: 403' MainBlockTemplate = 'index.html' BlockMessage = 'Geolocation.html' пожешь чтонить подкрутить?
🤟Полезно?
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно
Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.
Точнее не в любое место. А чтобы у этой картинки был лишь один родитель-body
Братишка, подскажи, что за расширение в VSCode со снипетами? Пахом с Епифаном спрашивают.
Я:Только вчера задумался над такой анимацией на сайте.
Жека: вот держи!
Спасибо!
@@FreelancerLifeStyle это тебе спасибо, я пол инета перерыл в поисках решения)
@@FreelancerLifeStyle а самое главное, что обьясняешь не на древнеэльфийском, а на понятном языке)
ты топчик!
@@FreelancerLifeStyleвсем привет а почему анимация не работает на андроиде ?
Уже час сижу и не понимаю почему ошибка в консоле(
Возможно кому-то поможет. У меня не работала анимация, потому что не заметил в самой первой строчке у себя ошибку: перед '_anim-items' должна стоять точка, либо должно быть написано div._anim-items
ААААААА часа два сидел искал ошибку, код переделывал. А всё дело было в точке)) спасибо!
видео наверное полезное для тех кто только начинает изучать фронт.
Но даже в этом случае лучше бы сказать что так делать можно но не желательно.
Потому что есть Intersection Observer API
Один я заметил, что постоянно меняются имена классов и в принципе код?
Как все пишут, что всё отлично
Переписал код буква в букву - ничего не работает
Возможно как раз из-за того, что каждый раз показывается разный код
Не знаю специально это или нет
И такой код вы пишите как фрилансер? Печально смотреть на такое. Наверно потому и фрилансер, потому что нормальная компания на работу не возьмет
Да, такой код пишу и все работет. Да, в компанию ни ногой на фрилансе больше платят)
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
Хех, спасибо!
Как раз то что нужно мне сейчас для заказа) Спасибо! лайк
Пожалуйста!
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Я рад! Пожалуйста!
Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜
Спасибо!
Перепроверил 10 раз но класс _active так и не добавлялся..нашел проще решение..если кому интересно...
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
Только у тебя тут класс не убирается после прокрутки ниже элемента, я немного подкорректировал и оставил свои комменты (может кому пригодится).
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight; // высота окна страницы в браузере (viewport)
var elementTop = reveals[i].getBoundingClientRect().top; // высота от верха окна страницы в браузере(viewport) до верхнего края элемента
var elementBottom = reveals[i].getBoundingClientRect().bottom; // высота от верха окна страницы в браузере(viewport) до нижнего края элемента
var elementVisible = 150; // высота появления элемента при скролле в viewport в пикселях, короче когда элемент при скролле влезет в окно страницы(viewport) на 150px то ему присвоится доп. класс. Можно и без переменной обойтись, просто вместо неё значение писать типа ( if ((elementTop < windowHeight - 150) && elementBottom > 0) )
// ветвление, которое присвоит класс элементу в диапазоне от его появления в окне страницы в браузере до его выходи из окна при скролле
if ((elementTop < windowHeight - elementVisible) && elementBottom > 0){
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
@@kirillhmk Спасибо! Та же проблема. Проверила много раз класс не добавлялся.
У меня почему-то не работает анимация( У меня почему-то отказываются объекты принимать класс active, хотя если вручную их вписать, то все работает
разобрались в чем проблема ?
Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (
Пожалуйста!
8:46
11:54 не анимировать когда скролишь вверх
13:30 анимация текста при скроле
15:39
17:33 анимация изображения + текст
19:32 поочередное появление
(комментарий для себя)
Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)
Тем кто пишет в scss будет полезно.Если есть какие-то предложения или коррективы по миксину - пишите :)
@mixin scroll-appearance($X, $Y) {
transition: all 1s ease-in-out 0s;
transform: translate($X, $Y);
opacity: 0;
&._active {
transform: translate(0px, 0px);
opacity: 1;
}
}
А ты можешь в начале показать конечный результат, а потом показывать каким способом ты этого достиг? Так будет удобнее и интереснее на мой взгляд.
Только увидела новое видео - сразу лайк, а потом уже смотреть.
Спасибо!
Как Вы делаете анимацию на сайтах? Используете ли animate.css и wow.js или делаете на чистом js? Актуально ли в 2021 использовать animate.css?
Лучше конечно ScrollMagic использовать
один з кращих для мене каналів по фронту !!!
як завжди - ТОП
Дякую!
Дай тобі Боже здоров'я, добрий чоловіче!!!
Дякую!
Подсказка не большая, можете не проверять на > 0 а просто записать aniItems.length и все, JS движок проверит, длинна массива не falsy ли значения. А falsy значение это null,false,true, 0 как раз наш , 0.0, -0.0, пустая строка.
Возможно ошибаюсь, но где-то это не сработало, по этому пишу наверняка)
Огромное спасибо за доступный и бесплатный формат подачи, и то, что осталось на русском языке из материалов. Очень надеюсь и жду, когда все хорошо закончится для Украины и украинцев. Жаль, что русскоязычный сегмент потерял такого талантливого блогера. Мира и процветания тебе, твоей семье и твоей родине.
Вопрос: если посмотрела и ничего не поняла, о чем идёт речь; какие видео перед этим надо будет посмотреть? Что выучить? Спасибо
Имею в виду js, основы посмотрела, а тут уж очень пфффф )))))
Люди які узають/учать ScrollMagic: А що так можна було🤯
Что бы скачать архив с патреона мне нужно заплатить 3$?
как у меня горит, никаких ошибок но ничего и не работает
ну и как сейчас?
@@mrbuslov да у меня была другая ошибка я её давно решил😂 Но спасибо
@@mrbuslov в переменной animItems querySelector прописал вместо querySelectorAll
@@mrbuslov нет но могу вечером поздно прислать готовый код
@@Pyoksen буду очень благодарен если вышлете уже 3 час ищу ошибку
Очень нужная инфа, спасибо!
Пожалуйста!
Женя, видео класс👍💪. Очень полезное.
У меня есть к тебе такой вопрос: мне 15 лет и я изучаю вёрстку и знаю html, css, препроцессор scss, немного gulp и другие технологии по типу git, npm и так далее. Но я хочу стать фронтендом и для этого мне нужен js и я его изучаю но я его трудно осваиваю. Мне все же продолжать изучать js в 15 лет? Или есть другие решения по типу изучение лучше вёрстки и потом когда буду старше начну js изучать. Интересен твои совет ;)
Изучать нужно поэтапно, возраст не помеха
Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
code.mu/ru/markup/manual/css/property/background-attachment/ и webref.ru/css/background-attachment
Нужно для картинки поставить значение свойства position: fixed; И установить z-index: -1;
у меня не работает(
у мене працює лиш перший екран, якщо прогортувати до параграфів з текстом то нічого не працює, у мене все як і у тебе. В сафарі спрацює анімація блоків якщо дьорнути трекпадом в стінку, тоді запрацює анімація, по інакшому зовсім ніяк
может, кто подскажет, зачеркивает pagey/хoffset, пишет, что это устаревшее значиение от scroll y/x, но когда заменяю page на scroll все равно ничего не работает(
Добрый день) Уже раз с вашими материалами работаю. Хочу сказать огромное спасибо за действительно содержательные видео.
Возник вопрос по данному видео. Не работает у меня ничего(
И никак не могу найти ошибку.
16:08 - в этом месте не совсем понятно зачем эта строка - ._anim-show ._active (если _anim-show, тольлко у параграфа), и без нее все работает, пишем только - ._active ._anim-show { ... }
А как сделать, что бы можно было так же видео воспроизводить, пока крутишь колесо, видео работает, перестаёшь крутить, становится пауза, в интернете толком не нашел(((
Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!
Пожалуйста!
Полезная. Информация. Проверять я ее конечно же буду :D
+идея для видео - блочный скроллинг (fullpage.js)
Для тех у кого почему-то не работает, как у меня сделал следующее: if ((window.scrollY > animItemOffSet - animItemPoint) && window.scrollY < (animItemOffSet + animItemHeight)) {
animItem.classList.add(`_active`) ну и тут поменял тоже, но вроде не ругалось на эту часть кода let scrollLeft = window.scrollY || document.documentElement.scrollLeft
let scrollTop = window.scrollY || document.documentElement.scrollTop. После чего наконец таки всё заработало
Спасибо!!! Благодаря твоему комментарию решил проблему. Несколько часов над кодом сидел не мог понять почему не работает.
спасибо братан, не знаю как ты до этого додумался, но ты мне помог, ибо я час сидел и вдуплял в чем проблема)
80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!
Спасибо!
Ничего не понятно, но очень интересно))) JS не дается(
Благодарю, хотел понимать как происходит эта анимация при скроле, а не просто использовать готовое решение без осознания. Есть загон у меня вот такой , я не могу использовать библиотеку, которая предоставляет готовое решение, если я не понимаю как она работает, придумать причину по которой я так думаю я тоже не могу), шиза)
о, я тоже такая :)
Видос в тему попался очень, не могу понять только почему так же не получается со scroll-snap
Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял
просто огромное количество информации в одном ролике, обязательно навешаю ко всему)
Спасибо. Мне урок понравился.
Нет обычного твоего наигранного ютубного - эгэгей!!!, -...погнали!!!, -... замечательно!!!. Извини это обычно не круто)
(Хотя в уроке про адаптивный текст, это было искренне, я почувствовал что ты был на самом деле очень рад, в остальных всех уроках - "не верю")
Интересно было бы посмотреть как сделать подобную функцию для анимации более гибкой, например как magicscroll, хотя бы примерно)))
В общем годный контент.
Спасибо!
Спасибо!
Йо, ребят, подскажите как сделать анимацию перехода чтобы при малейшей прокрутке съезжал весь блок на следующий, типо как на сайте тесла
Это по экранная прокрутка, будет видос по теме
@@FreelancerLifeStyle о, круто, буду ждать 🤘
@@FreelancerLifeStyle привет, а видос все еще не планируется?
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации
Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)
Спасибо!
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы.
Отдельно благодарю за качество монтажа, это просто нечто)
Спасибо!
то, что я искала! Спасибо! тысяча плюсиков в карму)))
Почему пишет: Uncaught TypeError: animOnScroll is not a function ?
У тебя незаслуженно мало подписчиков, сделай рекламу) твой контент выстрелит)
Спасибо! Буду рад репостам в соц сети!
Привіт, підкажіть, будьласка, де я могла зробити помилку. В мене скрол ще на другому блоці, а в третьому блоці з фото вже з'являється клас _active, поки я до нього(блока з фото) до скролюю анімація пропадає(((( ????
transition: all - зло, пишите всегда значения которые анимируете!!!
Ок
Как всегда все круто! Спасибо! вот вопрос, для вэб программирования нужно углубление в JS? или достаточно знать какую то базу? И будут ли уроки по JS?
Для верстки базу, для программирования глубже. Уроки по JS будут!
@@FreelancerLifeStyle благодарю, будем ждать!
Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!
по ходу написания кода, код не дебажится показывается уже после написного
Жека, человечище с большой буквы. Разложил все по полкам. Очень годно. Спасибо ОГРОМНОЕ!!
Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба
Женя, живи вечно! Ты сила!
Спасибо!
Намагаюсь повторити код. Отримав наступне повідомлення в VS Code:
var pageYOffset: number
@deprecated - This is a legacy alias of scrollY.
'pageYOffset' is deprecated.ts(6385)
lib.dom.d.ts(17709, 5): The declaration was marked as deprecated here.
Метод pageYOffset устарел
Спасибо большое за такое подробное описание и коментирование кода!
Всё работает))
Выложи пожалуйста этот замечательный макет на Patreon
Выложил результат на патреон, ссылка в описании
ти найкращий
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔
Супер!
Боржавський хребет топ) #Украина(Карпати)
Ничего не объясняешь толком , 👎
Как всегда топ! Спасибо, Жека
Пожалуйста!
Конечно не в тему. Странная ситуация случилась. Не знаю баг ли это вот хотел узнать встречалось ли тебе такая ситуация.
Ничего не обычного обычный блок в котором 3 блока с h1 и p. На этих 3х блоках установлены свои картинки через bg-image. Дальше магия.
Заголовок1
Lorem .................................
.............
блок с картинкой без заданных размеров растягивается по контенту это и понятно. h1 имеет margin. Так вот этот margin делает отступ не относительно контейнера в котором находиться, а выходит за его пределы. Как только ставлю border: 1px solid black на блок с картинкой, то картинка растягивается по border, убираю по верхнюю часть h1
Жека спасибо за видос как всегда на высоте
Пожалуйста!
Красавчик Женя!!! Я так долго искал урок по этой теме, и вы великолепно все разъяснили показали. Спасибо вам огромное.
Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!
Спасибо!
Сделай пожалуйста отдельный плейлист с обучением Javascript.
Уже скоро
По моему, ты перемудрил с математикой рассчета точки добавления класса ._active.
Функция offset - не нужна, достаточно el.getBoundingClientRect().top проверять, не меньше ли он ли он window.innerHeight - el.offsetHeight / 4.
Обрамляющий прямоугольник ведь дает в абсолютных координатах, относительно начала координат видимой части окна.
Если топ елемента будет 100 пикселей при прокрутке 0, то при прокрутке на 1000 пикселей он станет -900.
Также, если елемент ниже видимой части екрана, его топ будет больше высоты экрана и он будет уменьшаться по мере прокрутки страницы. Вот тут-то мы его и поймаем, когда докрутим страницу до элемента, его топ станет меньше высоты окна.
Это я навскидку прикинул. Надеюсь, ничего не путаю.
варианты событий: Что продуктивней?
1. добавлять везде класс с opacity и translate и убирать класс в нужный момент
2. везде добавлять opacity и translate и применять класс который переопределяет эти свойства
есть массив названий стран на русском (прим.) 250 эл. массива в JS.
Делаем вывод через JS => SELECT -> option
в итоге: в одном браузере 85 элементов показывает, в др. 187.
В чем прикол, как сделать все и везде?
Дякую, гарний приклад ))
Дякую за твої труди)
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек
Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!
Я рад!
Что делать если я задал элементу свойство "transform: translate(0px, 120%);" и он у меня вылазит за сайт и
появляется скролл на право и белая часть сайта?
Пошамань с overflow: hidden
@@dexterholland4430 Спасибо! Почему то я забыл про это свойство)
._anim-show._active это два разных класса через "._" или это один такой класс цельный?
у меня не работает абсолютно во сех скриптах queryselector вообще, даже в тех что я просто уже с исходник копирую что делать?
подскажите пожалуйста, ато сам никак не доеду)) Поставил я анимацию на элементы слайдера. Вопрос: как сделать, чтобы анимация начинала выполняться в момент загрузки слайда? Сейчас получается, что анимацию можно увидеть только на первом слайде, так как она выполняется одновременно на всех слайдах. Спасибо.
Женя, здравствуйте. Я не совсем понимаю. Я никак не нашел у вас в HTML файле подключение Java файла.
Это ерунда. А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com
А Вы случайна не знаете как сделать чтоб элемент анимировался только при
прокрутки страницы? Ну например прокручиваю я страницу вниз и он
анимируется в одну сторону, а если прокручиваю страницу вверх то
анимация объекта проигрывается наоборот? Вижу часто такую фишку на
Лебедевских сайтах но вот сделать такое не получается.
Интересно. Но это лишний код... 85% сейчас это мобильный трафик.. И никакая анимация в нем не работает.
Как всегда всё супер!) Большое спасибо)
Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
Спасибо, Жека! Давно хотел узнать как это можно делать без библиотек на чистом js и теперь буду использовать.
Супер!
Не рентабельно
@@СергейДемин-г5в а что рентабельно?
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
Как подписаться, если уже подписан?
Чтобы других рекомендаций вообще не было?
Ого))
Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍
Я рад!
Жека, если я правильно понял, даже при малейшем скролле будет запускаться цикл снова и снова. Это не большая нагрузка на страницу?
А как отключить анимацию для планшетов и мобильных?
Не понял с анимацией параграфов, почему мы присваеваем одному блоку анимируем другой, и в css мне не очень понятно с классами. Может кто-то объяснить?
Жека, привет!
Спасибо за уроки!
Устроился на работу, но тут толи безопасность все режет напрочь, толи еще что , но не открывается твой сайт со шпаргалками((( (причем служебной страницы блока нет, а:
Status Code: 403'
MainBlockTemplate = 'index.html'
BlockMessage = 'Geolocation.html'
пожешь чтонить подкрутить?