Scroll to top

Поділитися
Вставка
  • Опубліковано 10 лис 2024

КОМЕНТАРІ • 130

  • @prosto_razrabotka
    @prosto_razrabotka  3 роки тому +2

    😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
    ❓ Запись на консультацию - prosto-razrabotka.ru/
    ✨ Telegram канал - t.me/prostorazrabotka/
    🔥 Telegram чат - t.me/prostorazrabotkachat/
    Можете добавиться в друзья:
    📷 Instagram - instagram.com/vitaliy.kirenkov/
    📘 ВКонтакте - vk.com/vitaliy.kirenkov/
    📗 Facebook - facebook.com/vitaliy.kirenkov/
    📙 LinkedIn - www.linkedin.com/in/kirenkov/
    ✏️ Twitter - twitter.com/VitaliyKirenkov/
    А так же, подписаться на страницы:
    📘 ВКонтакте - vk.com/public195137161/
    📗 Facebook - facebook.com/prostorazrabotka/

  • @prosto_razrabotka
    @prosto_razrabotka  4 роки тому +42

    Лайк?)

    • @АртемЧешихин-з3л
      @АртемЧешихин-з3л 4 роки тому

      Определенно лайк

    • @Chewiee28
      @Chewiee28 4 роки тому

      Подскажи, пожалуйста, какими ты пользуешься скриптами и дополнениями на vscode? Допустим w100 становится width:100; и печать на двух строчках сразу:)
      Заранее огромное спасибо))

    • @senya1926
      @senya1926 4 роки тому

      безусловный ЛАЙК!!!!!!!!

    • @Девятьмуз
      @Девятьмуз 4 роки тому +1

      @@Chewiee28 "w100 становится width:100" emmet, а "печать на двух строчках сразу" сама вс код это поддерживает, зажимаешь альт и ставишь курсор левой кнопкой мыши на нужные места, потом печатаешь

    • @annanazimkova5168
      @annanazimkova5168 4 роки тому +2

      svg бы еще в нормальном формате увидеть, без переносов, а то у меня она не работает.

  • @bohdanzghonnik6504
    @bohdanzghonnik6504 4 роки тому +3

    Просто не понимаю, почему так мало просмотров. Вы - один из лучших по обьяснениям и примерам и не первый раз выручаете. Спасибо огромное за работу :)

  • @dmitrytravkin4787
    @dmitrytravkin4787 4 роки тому +7

    Вот так и надо работать! всегда с улыбкой )))

  • @littlecat8931
    @littlecat8931 2 роки тому

    Спасибо больше. Полезно. То что надо!

  • @sheraabdurakhmanov9631
    @sheraabdurakhmanov9631 4 роки тому +4

    Отлично!!! Показывайте больше таких фишек :))) спасибо за ваш труд

  • @lefury1337
    @lefury1337 4 роки тому +2

    Спасибо большое за ваши труды👏 Очень полезно, понятно и качественно подано 👍

  • @qwe-rty-
    @qwe-rty- 4 роки тому

    Блин, оч круто. Сделал похожую фишку, только менял цвет кнопки при прокрутке, даже сам формулы вывел для подсчёта уровня заливки. Доходчиво и круто, лайк.

  • @alman_harbi
    @alman_harbi 4 роки тому +1

    Ахриненно получилось! Думал, как сделать с этой заливкой при скроле расчет. Из-за нехватки знаний js не получалось. Теперь понял. Срочно, лайк!

  • @Serhii-bx2zn
    @Serhii-bx2zn 4 роки тому +1

    Спасибо большое за интересное видео! Мне как начинающему верстальщику очень интересно смотреть такие видео с фишками и подача информации у вас очень лёгкая и понятная! Продолжайте в том же духе!

  • @АнтонКаменский-м8ы

    Сутки спустя перспал с полученной информации,сегодня пересмотрел всё заново и всё встало на свои места,спасибо!)

  • @LiNeLb_
    @LiNeLb_ 3 роки тому

    Спасибо за такой крутой урок)))Необычно и эффектно)

  • @shindo4933
    @shindo4933 3 роки тому

    спасибо за данный видеоролик!

  • @Indy_660
    @Indy_660 4 роки тому +1

    Спасибо, очень интересно

  • @АнатолийМихайлович-н8в

    Спасибо

  • @noname-tm
    @noname-tm 4 роки тому +3

    Спасибо!

  • @НЕРЕГУЛЯРНЫЙПОДКАСТ-и5ш

    Братишка, не сбавляй обороты, ты красавчик, приятно слушать

  • @saharnya
    @saharnya 4 роки тому +1

    Виталий так позитивно настроен, оттого ещё приятнее смотреть его видео)) спасибо за видео !

  • @evgeniysurma8116
    @evgeniysurma8116 4 роки тому

    согласен с комментариями ниже! очень интересный и поучительный формат. Спасибо автору)

  • @noname1999x
    @noname1999x 4 роки тому +2

    Обожаю 🔥

  • @ТимурСагайдаков
    @ТимурСагайдаков 4 роки тому +2

    Спасибо за видео) Классная рубрика!

  • @one-zero-dev
    @one-zero-dev 4 роки тому

    Интересный урок, спасибо!

  • @FillaPro
    @FillaPro 3 роки тому

    Спасибо, огромное) Очень круто!

  • @mollex7826
    @mollex7826 4 роки тому +2

    Спасибо, мне очень сильно понравилось!!

  • @niksamoil
    @niksamoil 4 роки тому +3

    Видео очень классное, но для новичков очень мало объяснений что и откуда взялось ;)

  • @hooli7gan
    @hooli7gan 4 роки тому +1

    Спасибо, очень полезно!

  • @kotlancer
    @kotlancer 4 роки тому

    Вот это офигеть крутая штука получилась! Взял себе на вооружение)))

  • @ivrus196
    @ivrus196 4 роки тому +1

    Гребаный волшебник😅👍👍👍👍👍

  • @privet_baget
    @privet_baget 4 роки тому

    Прикольная штука, нраицца) Счас добавлю в текущий проект, думаю заказчику тоже вкатит)

  • @azerelizade1957
    @azerelizade1957 2 роки тому

    prosto neveroyatno ya dumayu cto eto prosto filosofiya

  • @salokhiddinjaloliddinov6494
    @salokhiddinjaloliddinov6494 4 роки тому

    Всё очень круто. Но только кнопка подписка мешала смотреть на кнопку. Спасибо за урок. Удачи вам!

  • @АнтонКаменский-м8ы

    Я как обычно половину не понял но очень интересно.
    Лайкос однозначно!)

  • @natalim8418
    @natalim8418 2 роки тому

    отличное видео! только не понятно, где в content взялась стрелочка? где её берут?

  • @ТимофейПодлесских
    @ТимофейПодлесских 4 роки тому +1

    Здорово

  • @andreyegorov4123
    @andreyegorov4123 4 роки тому

    Очень полезно, большое спасибо! ^^

  • @towelie117
    @towelie117 4 роки тому +11

    На заметку: behavior: smooth не поддерживается в сафари.

    • @TipAnswer
      @TipAnswer 4 роки тому

      Ильгиз Мавлютов не пугай начинающих разрабов, все раб , просто в npm найди полифил для behavior и все раб

    • @artemnaumov3577
      @artemnaumov3577 4 роки тому +1

      Не поддерживается в Safati, Safari на iOS и IE. Однако, есть полифилл. Используй его и все будет. github.com/iamdustan/smoothscroll

  • @elenafromny9567
    @elenafromny9567 2 роки тому

    Классное видео, непонятно, почему так мало просмотров

  • @pavel7930
    @pavel7930 4 роки тому

    Круто, спасибо !

  • @alexeyvasilkov436
    @alexeyvasilkov436 4 роки тому

    Видео очень крутое, как и весь контент. Виталий, я без наезда, но могу научить произносить th за 30 минут. Очень легко и просто. Если интересно пиши free of charge

  • @boldureans
    @boldureans 4 роки тому

    Новые ништяки! :3

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому +1

      Ага. И значок у тебя уже поменялся -))

  • @hjetwd
    @hjetwd 4 роки тому +3

    а подпрыгивание элемента при 100% скролле мы превращаем из недокументированного бага в фишку =))

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому

      Все юзеры мака на каждом сайте сталкиваются с этой «фишкой»))

  • @chikosan3890
    @chikosan3890 4 роки тому +1

    thnx a lot

  • @vmedinsky
    @vmedinsky 4 роки тому

    при 100%-м скроле вниз думаю было бы классно добавить чтоб ещё и стрелочка вверх загоралась оранжевым

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому

      Это уже на ваше усмотрение. Все данные у вас для этого есть.

  • @Sanek11185
    @Sanek11185 3 роки тому

    задумка классная, на РС всё работает а вот на андроиде нет. Только круг на пол экрана виден и всё.

  • @АнтонКаменский-м8ы
    @АнтонКаменский-м8ы 4 роки тому +1

    Кстати было бы очень не плохо файлики прикрепить

  • @dbuzeninka8005
    @dbuzeninka8005 4 роки тому

    привет, я пишу тебе по след поводу : несколько меяцев назад когда ты в конце видоса спрашивал подсказать что бы сделать, то я написал комент о том, что именно для новичка информация укладывается в голове не в виде тегов и свойств, а именно по разделам - вот набор тегов для меню, вот набор свойств для выравнивания по центру и т.д я рад что ты прислушался к моиму пожеланию снимать видосы конкретно дл каждой фишки, спасибо тебе;)
    П.С. я думаю ты и сам заметил, что кол-во просмотров выросло в разы, ведь зачем мне смотреть марафон по верстке на 5 часов. если проблема просто в кнопке-бургер ?))

    • @iamname8758
      @iamname8758 4 роки тому

      Не у всех, есть время на 5 часов это верно)

  • @ПетрИванов-с9в
    @ПетрИванов-с9в 2 роки тому

    Вот если бы еще это все было на ванильном js вообще цены не было!

  • @Ve-Dono
    @Ve-Dono 4 роки тому +1

    Ля, мама мия , яка ляля . Крч, очень классно выглядит . И тупой вопрос : 'Будет видос с обучением Wordpress или как учить нормально "

  • @Дока-Мремонтмебели

    Что то похожее для отправки формы, очень интересует.

  • @123pavel61981
    @123pavel61981 4 роки тому +1

    Ты красавчег без вопросов =) НО подскажи, что у тебя за кресло плиз =)

  • @soofasterchannel7760
    @soofasterchannel7760 4 роки тому

    Добрый день! Подскажите, пожалуйста, плагин для gulp, который может переносить классы из html в scss!

    • @mynameiscat__
      @mynameiscat__ 3 роки тому

      csstractor вроде как то так, загугли

  • @Polihut1
    @Polihut1 4 роки тому

    Новая порция годнотищи )

  • @s9219871110
    @s9219871110 3 роки тому

    Очень круто объясняешь, но еще круче проговариваешь алгоритм написания JS (чтобы получить это, надо сделать это, что мне для этого нужно - ага) - просто удивительно. Это с опытом придет, или с помощью чего-то надо подтянуть??

    • @prosto_razrabotka
      @prosto_razrabotka  3 роки тому

      Я бы сказал, что это озвучивание просто логики, обычной человеческой, подкреплённое знанием языка.
      Что верстка, что js, в первую очередь пишутся в голове, а потом уже перепечатываются

    • @s9219871110
      @s9219871110 3 роки тому

      @@prosto_razrabotka ответ, который может вогнать в грусть))))) Думал ты ответишь что-то типа "да конечно, чувак, вот книга, читаешь и становишься богом алгоритмов"))))))) Но видать не судьба))

    • @prosto_razrabotka
      @prosto_razrabotka  3 роки тому

      @@s9219871110 «нет сынок, это фантастика»-))

  • @Влад-Донцов
    @Влад-Донцов 4 роки тому +1

    крутое видео с крутой идеей

  • @melomalo1682
    @melomalo1682 4 роки тому

    @Просто:разработка а вы ссылку на git не даете? просто svg хотел вытащить

  • @bekzatmaratuly9344
    @bekzatmaratuly9344 4 роки тому

    Здравствуйте урок очень классно,
    Не могли бы показать как сделать появления (плюс анимация) элементов при скролле.
    На чистом js или с помощью библиотека

    • @noname1999x
      @noname1999x 4 роки тому

      Если нужно сейчас, то забейте "анимация при скролле" на yt

  • @echpochmak6666
    @echpochmak6666 10 місяців тому

    а в какой программе вы работаете?

  • @АлександрБуланов-о6к

    топчик!!!

  • @ВатквизДеСад
    @ВатквизДеСад 2 роки тому

    привет) у мен на компьютере этот метод (плавный скролл) работает, а на ноутбуке - нет)

  • @iamname8758
    @iamname8758 4 роки тому

    Самый сложный скролл топ который я видел, но по другому интересно не было бы)

  • @sergioferrari6840
    @sergioferrari6840 3 роки тому

    Мне как для новичка не понятна куда нужно поместить код в html, после всего контента или в конце, после всех блоков?

    • @prosto_razrabotka
      @prosto_razrabotka  3 роки тому

      Чем ваш первый вариант отличается от второго?

    • @sergioferrari6840
      @sergioferrari6840 3 роки тому

      @@prosto_razrabotka извиняюсь ,напутал. Поместить нужно в body, после основного контента? Еще бы хотелось в розлике услышать про то как он будет работать на мобильной версии.

  • @baget-info
    @baget-info 4 роки тому

    У меня почему-то и в хроме не работает behavior: smooth. При клике моментально переносит на верх страницы

    • @AdwardGoncharov
      @AdwardGoncharov 4 роки тому

      Тут кстати можно задать стиль для html для плавной прокрутки

  • @Juliaplusmusic
    @Juliaplusmusic 3 роки тому +2

    ругается на 4 строку в js не пойму что не так const pathLength = scrollUpSvgPath.getTotalLength();

  • @luxarmiger5729
    @luxarmiger5729 2 роки тому

    Спасибо, большое, но увы, все работает, кроме заливки. Пошел искать ошибку.

  • @Android.imo.i
    @Android.imo.i 2 роки тому

    Здравствуйте как поменять анимация в телефон Vivo Y17 как у айфон

  • @nickshow890
    @nickshow890 2 роки тому

    У меня у одного проблемы? Оранжевый круг кривее серого, по итогу ничего не работает.. Хотя все делал по уроку(

    • @nickshow890
      @nickshow890 2 роки тому

      Забейте, я олух..

  • @sowebphotography
    @sowebphotography 4 роки тому

    Сделай пожалуйста видео как frontend разработчику попасть в IBM

  • @Влад-Донцов
    @Влад-Донцов 4 роки тому +1

    привет!
    ахха

  • @Девятьмуз
    @Девятьмуз 4 роки тому

    Я бы попросился к Виталику работать, да сдается мне перетряхивает он там своих миньенов как положено, а Виталик?

  • @iGotton
    @iGotton 4 роки тому

    +

  • @sowebphotography
    @sowebphotography 4 роки тому

    Когда уроки по js?

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому

      Вам нужен официальный заголовок - Уроки по js? Другой причины я просто не вижу, поскольку последние 5-6 видео и есть практическое изучение js, самых основ.

    • @sowebphotography
      @sowebphotography 4 роки тому

      @@prosto_razrabotka соре, просто недавно с самого первого видео смотреть начал, и еще не дошел до более свежих

  • @UkraineAb0veAll
    @UkraineAb0veAll 4 роки тому

    большое спасибо за классный урок - "лайк" однозначно
    к сожалению, у меня при прокрутке заливка появляется сразу полностью, а не постепенно (как в видео).
    пожалуйста, помогите найти ошибку - вот код:
    const ofs = 100;
    const scrollUp = document.querySelector('.scroll-up');
    const scrollUpSvgPath = document.querySelector('.scroll-up__svg-path');
    const pathLength = scrollUpSvgPath.getTotalLength();
    scrollUpSvgPath.style.strokeDasharray = '$(pathLength) $(pathLength)';
    scrollUpSvgPath.style.transition = 'stroke-dashOffset 20ms';
    const getTop = () => window.pageYOffset || document.documentElement.scrollTop;
    // function #1: updateDashoffset
    const updateDashoffset = () => {
    const height = document.documentElement.scrollHeight - window.innerHeight;
    const dashoffset = pathLength - (getTop() * pathLength / height);
    scrollUpSvgPath.style.strokeDashoffset = dashoffset;
    };
    // function #2: onScroll
    window.addEventListener('scroll', () => {
    updateDashoffset();
    if (getTop() > ofs) {
    scrollUp.classList.add('scroll-up-active');
    } else {
    scrollUp.classList.remove('scroll-up-active');
    };
    });
    // function #3: click
    scrollUp.addEventListener('click', () => {
    window.scrollTo({
    top: 0,
    behavior: 'smooth'
    });
    });

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому

      Залейте на кодпен и заходите в телеграмм чат, там разберёмся

    • @UkraineAb0veAll
      @UkraineAb0veAll 4 роки тому

      @@prosto_razrabotka - спасибо за ответ.
      вот код, который я набрал по видео:
      codepen.io/vklabua/pen/ZEQowbP
      на CodePen'е такой же эффект (((

    • @prosto_razrabotka
      @prosto_razrabotka  4 роки тому

      Я писал - зайти в телеграм чат, а не сюда приложить! -)
      И нет, вы не всё правильно переписали. В строке с strokeDasharray - используется экранирование. Там угловые кавычки и фигурные скобки

    • @UkraineAb0veAll
      @UkraineAb0veAll 4 роки тому

      @@prosto_razrabotka - большое спасибо за Ваш ответ, Виталий . исправил - и все заработало )))
      спасибо за Ваши уроки: просто, интересно и с изюминкой - по ним действительно хочется учиться )))

  • @abazhutov
    @abazhutov 4 роки тому

    "просто", "просто", "просто", сомневаюсь, что это свойственно для нормальной речи