Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно
Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Только наткнулся на это видео, видать колокольчик забыл. Но уже заинтриговало. Представляю как мои заготовки оживут после просмотра. Спасибо за такие вот видео. Очень полезно и помогает в развитии.
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
8:46 11:54 не анимировать когда скролишь вверх 13:30 анимация текста при скроле 15:39 17:33 анимация изображения + текст 19:32 поочередное появление (комментарий для себя)
видео наверное полезное для тех кто только начинает изучать фронт. Но даже в этом случае лучше бы сказать что так делать можно но не желательно. Потому что есть Intersection Observer API
Спасибо, пол дня убил чтобы найти как это сделать без библиотек. Обычно на ютубе ничего путного никогда не находил, но потеряв надежду что то найти решил написать, и нашел!
а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы. Отдельно благодарю за качество монтажа, это просто нечто)
Тем кто пишет в 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; } }
Возможно кому-то поможет. У меня не работала анимация, потому что не заметил в самой первой строчке у себя ошибку: перед '_anim-items' должна стоять точка, либо должно быть написано div._anim-items
Подсказка не большая, можете не проверять на > 0 а просто записать aniItems.length и все, JS движок проверит, длинна массива не falsy ли значения. А falsy значение это null,false,true, 0 как раз наш , 0.0, -0.0, пустая строка.
варианты событий: Что продуктивней? 1. добавлять везде класс с opacity и translate и убирать класс в нужный момент 2. везде добавлять opacity и translate и применять класс который переопределяет эти свойства
у массива есть метод map, который позволяет пробегать колбеком по элементам массива, в этом случае проверку на непустой массив можно выкинуть. логику проверки появления объекта на экране лучше вынести в отдельную функцию - читаемость кода увеличится
Ура, новый выпуск "как это сделать" И ещё, на вашем сайте, в разделе transform есть спойлер matrix3d. Там 16 букв N в скобках. И они все не переходят на следующую строку. Поэтому в моб. версии сайта эти N, N... Не помещаются на всей ширине телефона. Тоесть просто нужно сделать так, чтобы они переходили на след. строку.
Классно, на нативочке все работает. Но честно вот для анимации как раз и можно подключить библиотеку, они очень легковесные. Но за видео спасибо, пригодится.
Как всегда всё супер!) Большое спасибо) Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
Благодарю, хотел понимать как происходит эта анимация при скроле, а не просто использовать готовое решение без осознания. Есть загон у меня вот такой , я не могу использовать библиотеку, которая предоставляет готовое решение, если я не понимаю как она работает, придумать причину по которой я так думаю я тоже не могу), шиза)
Как всегда все супер!!! Жека братан этот пример я могу найти в гитхабе??? Хочется видеть код виде локального репозитория, понять как делать такие анимации, проэксперементировать)))
Вместо простыни js кода можно было использовать библиотеку Waypoints. И DOMContentLoaded не стоит забывать. И я бы выделил стили анимации в отдельные классы, например .anim_fade_up .anim_fade_left что бы в будущем переиспользовать. Узнал кое-что новое. Спасибо.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
🤟Полезно?
🔴 Получить доступ к плюшкам + поддержать канал: 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всем привет а почему анимация не работает на андроиде ?
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Я рад! Пожалуйста!
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
Хех, спасибо!
Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (
Пожалуйста!
Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!
Пожалуйста!
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Только наткнулся на это видео, видать колокольчик забыл. Но уже заинтриговало. Представляю как мои заготовки оживут после просмотра. Спасибо за такие вот видео. Очень полезно и помогает в развитии.
просто огромное количество информации в одном ролике, обязательно навешаю ко всему)
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации
Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек
Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
Как раз то что нужно мне сейчас для заказа) Спасибо! лайк
Пожалуйста!
Спасибо большое за такое подробное описание и коментирование кода!
Всё работает))
Чем больше узнаю, тем больше понимаю что изучать и изучать ещё оооочень много! Спасибо Жека!
Лучший! Спасибо! Только твои туторы адекватно работают с первого раза!
Один из самых крутых каналов, очень много полезного. Спасибо большое!
8:46
11:54 не анимировать когда скролишь вверх
13:30 анимация текста при скроле
15:39
17:33 анимация изображения + текст
19:32 поочередное появление
(комментарий для себя)
видео наверное полезное для тех кто только начинает изучать фронт.
Но даже в этом случае лучше бы сказать что так делать можно но не желательно.
Потому что есть Intersection Observer API
Жека, человечище с большой буквы. Разложил все по полкам. Очень годно. Спасибо ОГРОМНОЕ!!
Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!
Я рад!
Спасибо, пол дня убил чтобы найти как это сделать без библиотек. Обычно на ютубе ничего путного никогда не находил, но потеряв надежду что то найти решил написать, и нашел!
Как Вы делаете анимацию на сайтах? Используете ли animate.css и wow.js или делаете на чистом js? Актуально ли в 2021 использовать animate.css?
Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)
Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!
Очень нужная инфа, спасибо!
Пожалуйста!
Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба
Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜
Спасибо!
Только увидела новое видео - сразу лайк, а потом уже смотреть.
Спасибо!
Дякую, гарний приклад ))
Дякую за твої труди)
Красавчик Женя!!! Я так долго искал урок по этой теме, и вы великолепно все разъяснили показали. Спасибо вам огромное.
Дай тобі Боже здоров'я, добрий чоловіче!!!
Дякую!
Спасибо! Не всё, конечно, понятно, но есть над чем поломать голову. Отличный урок!
Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!
Спасибо!
Женя, живи вечно! Ты сила!
Спасибо!
а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру
Спасибо!
Спасибо, Жека! Давно хотел узнать как это можно делать без библиотек на чистом js и теперь буду использовать.
Супер!
Не рентабельно
@@СергейДемин-г5в а что рентабельно?
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
Уже час сижу и не понимаю почему ошибка в консоле(
Спасибо. Искал везде материал и опять нашел то, что нужно у тебя)).
то, что я искала! Спасибо! тысяча плюсиков в карму)))
80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!
Спасибо!
Ну что сказать просто ЛУЧШИЙ !!!!!!!!!!!!!!!!!!!!!
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы.
Отдельно благодарю за качество монтажа, это просто нечто)
Спасибо!
Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)
Спасибо!
Как всегда топ! Спасибо, Жека
Пожалуйста!
Тем кто пишет в 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;
}
}
Возможно кому-то поможет. У меня не работала анимация, потому что не заметил в самой первой строчке у себя ошибку: перед '_anim-items' должна стоять точка, либо должно быть написано div._anim-items
ААААААА часа два сидел искал ошибку, код переделывал. А всё дело было в точке)) спасибо!
Фрилансер, благодарю! Все получилось!!!
Только вчера искал как это сделать ничего не нашёл и сегодня ты делаешь такой подарок спс^
Пожалуйста!
Евгений огромное спасибо !!!!!
Пожалуйста!
Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔
Супер!
Как же я ждал этого видео ))
Хех, надеюсь полезное!)
Максимально полезное видео!
Я рад!
Очень классно выглядит, правда понял только суть. Завтра попробую за видео повторить. Урок очень качественный. Лайк подписка.
видно как ты кайфуешь в конце от проделанной работы
Супер, спасибо! Столько тонкостей показал.
Спасибо огромное!! всё по сути и понятно!
Женя, спасибо за видео! Супер!
Женя, это огонь!! Спасибо!!
невероятно полезное видео!
благодарю за контент
успехов
Спасибо!
один з кращих для мене каналів по фронту !!!
як завжди - ТОП
Дякую!
Круто! Есть куда стремиться)) Видел такую анимацию у девушки веб-дизайнера на её сайте.
Повернувся до відео - це коли ти вже розумієш, що пишеться в js - супер!
Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍
Я рад!
Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял
Дякую! Очень полезный урок!
Подсказка не большая, можете не проверять на > 0 а просто записать aniItems.length и все, JS движок проверит, длинна массива не falsy ли значения. А falsy значение это null,false,true, 0 как раз наш , 0.0, -0.0, пустая строка.
Возможно ошибаюсь, но где-то это не сработало, по этому пишу наверняка)
Спасибо за видосы, просто The Best!!
Я уже обыскался, как сделать такую анимацию. Спасибо тебе огромное
Полезная. Информация. Проверять я ее конечно же буду :D
+идея для видео - блочный скроллинг (fullpage.js)
Спасибо!
Как всегда - то, что нужно!)
Пожалуйста!
Спасибо большое!)))
Пожалуйста!
Теперь ноутбук при просмотре этого сайта греет немного лучше. Спасибо :)
Слабенький у тебя ноутбук, если его это так напрягает )))
Без азов JS немного сложно заходит. Лайк и СПАСИБО!
Азы будут!
Как всегда все круто! Спасибо! вот вопрос, для вэб программирования нужно углубление в JS? или достаточно знать какую то базу? И будут ли уроки по JS?
Для верстки базу, для программирования глубже. Уроки по JS будут!
@@FreelancerLifeStyle благодарю, будем ждать!
Великолепно! Спасибо большое!
ты очень крут) спасибо за урок
Пожалуйста!
варианты событий: Что продуктивней?
1. добавлять везде класс с opacity и translate и убирать класс в нужный момент
2. везде добавлять opacity и translate и применять класс который переопределяет эти свойства
Жека спасибо за видос как всегда на высоте
Пожалуйста!
у массива есть метод map, который позволяет пробегать колбеком по элементам массива, в этом случае проверку на непустой массив можно выкинуть. логику проверки появления объекта на экране лучше вынести в отдельную функцию - читаемость кода увеличится
Спасибо, потестирую
А ты можешь в начале показать конечный результат, а потом показывать каким способом ты этого достиг? Так будет удобнее и интереснее на мой взгляд.
Ура, новый выпуск "как это сделать"
И ещё, на вашем сайте, в разделе transform есть спойлер matrix3d. Там 16 букв N в скобках. И они все не переходят на следующую строку. Поэтому в моб. версии сайта эти N, N... Не помещаются на всей ширине телефона. Тоесть просто нужно сделать так, чтобы они переходили на след. строку.
Ну или просто написать три точки
Благодарю!! Круто!!
Спасибо за ролик!
Пожалуйста!
Классно, на нативочке все работает. Но честно вот для анимации как раз и можно подключить библиотеку, они очень легковесные. Но за видео спасибо, пригодится.
Люблю руками под задачу. За это больше платят)
Крутяяяк!!!
Спасибо!
Жека ты крут!!! Все так вовремя))) как только подумал про это, так сразу у тебя видос.))
спасибо, все понятно, но довольно сложно :) нужно разбератся со всем ) значит начнем
Как всегда на высоте, вот только в силу обыденности уже лень писать подобные комментарии, ведь и без них и дураку все понятно) теперь ждём js ♥️♥️♥️
JS уже скоро!
Как всегда всё супер!) Большое спасибо)
Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
Очень помогло, спасибо
Привет, еще как полезно и интересно. Спасибо большое.
Просто топчик!
Спасибо!
как всегда топовый контен!
красавчик ))) спасибо за видосы !!!!
Круто!💪
СпасибО!
Благодарю, хотел понимать как происходит эта анимация при скроле, а не просто использовать готовое решение без осознания. Есть загон у меня вот такой , я не могу использовать библиотеку, которая предоставляет готовое решение, если я не понимаю как она работает, придумать причину по которой я так думаю я тоже не могу), шиза)
о, я тоже такая :)
Как всегда все супер!!! Жека братан этот пример я могу найти в гитхабе??? Хочется видеть код виде локального репозитория, понять как делать такие анимации, проэксперементировать)))
Спасибо! Круто, как всегда 😉
Супер!
Вместо простыни js кода можно было использовать библиотеку Waypoints. И DOMContentLoaded не стоит забывать.
И я бы выделил стили анимации в отдельные классы, например .anim_fade_up .anim_fade_left что бы в будущем переиспользовать.
Узнал кое-что новое. Спасибо.