Анімація цифрового лічильника при скроллі. Пишемо на HTML CSS JavaScript

Sdílet
Vložit
  • čas přidán 16. 06. 2024
  • У цьому відео покажу як легко зробити анімацію цифрового лічильника при скроллі сторінки на HTML CSS JavaScript
    🟢 Понад 5 000 пропозицій роботи для програмістів з України на Just Join IT bit.ly/3zJiIEt
    👉 Канал Just Join IT на Телеграмі - t.me/+6SEKsCc3I7pjNjU0
    👉 Група Just Join IT на Facebook - bit.ly/3kuVg55
    🤟 Матеріали уроку (патреон): / 67963532
    ❤️ Стати спонсором каналу: / @freelancerlifestyle
    🔴 Платний курс по верстці: edu.fls.guru
    🤟 БЕЗКОШТОВНИЙ курс по верстці сайтів (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
    🔴 Карта каналу: miro.com/app/board/o9J_lZB3YKI=/
    🔴 Отримати доступ до екстра контенту + підтримати канал: / freelancerlifestyle
    🔴 Платний курс по верстці: edu.fls.guru
    🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
    🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
    🔴 Facebook: / freelancerlifestyle
    🔴 Instagram: / freelancer.lifestyle
    00:00 - У випуску
    00:27 - Реклама
    01:43 - Лічільник при завантаженні
    08:40 - Лічильник при скроллі
    14:53 - Заключення і матеріали
    👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
    👉 @СЛУШАЙ! Канал с интересными историями из жизни.
    👋 Мене звати Женя Андріканич, я IT - спеціаліст. Більше 10ти років займаюсь розробкою сайтів.
    Перейняти досвід: / freelancerlifestyle
    #навчання #верстка #фрілансерпожиттю
    🤟 Живи, а працюй у вільний час! ©

Komentáře • 255

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  Před 2 lety +8

    Рубрика набирає оберти, далі більше!
    🔴 Карта каналу: miro.com/app/board/o9J_lZB3YKI=/
    🔴 Отримати доступ до екстра контенту + підтримати канал: www.patreon.com/freelancerlifestyle
    🔴 Платний курс по верстці: edu.fls.guru
    🔴 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

  • @vikinglego4946
    @vikinglego4946 Před 2 lety +21

    Ваші курси - ТОП! Респект та подяка за Солов'їну! Дай Бог Вам здоров'я, пане Євгене!

  • @user-xc1ep2ee9z
    @user-xc1ep2ee9z Před 2 lety +8

    Дуже дякую дядьку Євгене.
    Як завжди неперевершена подача матеріалу!

  • @bibik_s_egipta
    @bibik_s_egipta Před 2 lety +19

    Оо,то что нужно, спасибо за контент,как всегда чудо!

  • @ilyaprotsenko1023
    @ilyaprotsenko1023 Před 2 lety +8

    Дуже добре, Жека! Велике та щире дякую тобі 😊

  • @user-ie7qi7rn4n
    @user-ie7qi7rn4n Před 2 lety +4

    Женя, дуже дякую за контент. Я буквально минулого тижня обшукав весь інтернет в пошуках такого лічильника. Знайшов інші варіанти які теж працюють але твій однозначно їх перевершує!

  • @projectfrost4025
    @projectfrost4025 Před 2 lety +7

    Дякую за ці чудові відео!

  • @user-cg3lg5ms8i
    @user-cg3lg5ms8i Před 2 lety +13

    Велике дякую - і за контент, і за українську мову!

  • @ihorv44
    @ihorv44 Před 2 lety +4

    наша зброя в цей момент - вподобайка і комент (с)

  • @user-pg5se2xi6n
    @user-pg5se2xi6n Před 2 lety +2

    Женя, величезне дякую за чудові навчальні відео!👏🙏

  • @user-hb1tw3dp2r
    @user-hb1tw3dp2r Před 2 lety +8

    Чудове відео! Слава Україні!

  • @deniskotov
    @deniskotov Před 2 lety +2

    Женя, спасибо за работу. Особенно в это время.

  • @vadymshtyra9461
    @vadymshtyra9461 Před rokem +1

    Дякую Єваген за корисну та чудову подачу інформації)))

  • @musicchannel7700
    @musicchannel7700 Před 2 lety +1

    Дуже корисно, дякую =) Не можу дочекатися вересня вже на верстку =))))

  • @D1O_
    @D1O_ Před 2 lety +1

    Чудове відео, дуже корисно та цікаво )

  • @Kapitowka13
    @Kapitowka13 Před 2 lety +1

    Дякую! Буду використовувати)

  • @vassastepanova8708
    @vassastepanova8708 Před 2 lety +1

    Як завжди вчасно))) як раз таке треба буде на сайті зробити.

  • @cruelwinter
    @cruelwinter Před 2 lety +1

    офигенный урок, спасибо!

  • @user-ut1ll4wi6s
    @user-ut1ll4wi6s Před 2 lety +3

    Большое человеческое спасибо.

  • @victoriakorsun
    @victoriakorsun Před 2 lety +2

    Дякую за відео, супер! Ви плануєте знімати відео про шаблонізатори та фреймворки JavaScript?

  • @alexandertsimba4856
    @alexandertsimba4856 Před 2 lety +1

    дякуємо за контент!👍👍👍👍👌

  • @volodymyrhera3536
    @volodymyrhera3536 Před 2 lety +1

    Дякую за урок. Дуже корисно

  • @danilokozakov3612
    @danilokozakov3612 Před 2 lety +4

    Як ж розцвів україномовний сегмент Ютубу в цей складний час. Не може не радувати слух прослуховування таких прекрасних уроків такою прекрасною мовою)

  • @rostyslavkinash5232
    @rostyslavkinash5232 Před 2 lety +1

    Дякую за контент

  • @GabrialWeb
    @GabrialWeb Před 2 lety +4

    спасибо за контент, очень полезный и нужный прием по верстке!

  • @user-wl1bo8ym1t
    @user-wl1bo8ym1t Před rokem

    Дуже дякую. Контент супер!

  • @aloe9954
    @aloe9954 Před 2 lety +2

    Супер, Женя уважение тебе. Сам Одессит привыкший к общению по русски, но украинский очень люблю.

  • @ytuser9248
    @ytuser9248 Před 2 lety +17

    Дякую Євгене за вашу працю. Дуже приємно дивитися ваш контент українською мовою.

    • @user-ln5eb3dm2x
      @user-ln5eb3dm2x Před 2 lety +1

      Как будто раньше было хуже или лучше... Все смотрели и смотрят его за подачу и материал, а не за язык на котором он обучает.

    • @ytuser9248
      @ytuser9248 Před 2 lety

      @@user-ln5eb3dm2x Я просто висловив свою підтримку та солідарність. Що вас так зачепило, що ви аж вирішили написати цей коментарій?

    • @user-ln5eb3dm2x
      @user-ln5eb3dm2x Před 2 lety +1

      @@ytuser9248 Потому что был канал на языке котором проще общаться его автору и просматривать зрителям. А по итогу ситуации это никак не поможет. Думаете от смены языка перестанут лететь снаряды или погибать люди?

  • @PavelOrgunov
    @PavelOrgunov Před 9 měsíci

    Таке все у Євгена корисне! Дуже приємно! Дякую! Трохи допрацювал скрипт за допомогою чату (а як же ж без джі-пі-ті, якщо джаваскрипта слабенько так розумієш), тепер анімує при скролі донизу, та не анімує, коли повертаєшся догори. Потім знов анімує, коли гортаєш до низу. І так щоразу та без необхідності перезавантажувати сторінку. Мені так більш подобається :)

  • @user-ved91
    @user-ved91 Před rokem

    Крутий урок, щось подібне написав з викристанням setTimeout. Та твое рішення - це бомба ракета =)) Дякую за науку ))
    😊

  • @luferov
    @luferov Před 2 lety +2

    Дякую!

  • @user-eq6ef8vh5x
    @user-eq6ef8vh5x Před 2 lety +1

    вже 4 роки пишу на реакті, майже забув ванілу. дякую, що нагадуєш!

  • @olehpastovenskyi6441
    @olehpastovenskyi6441 Před 2 lety +2

    Вітаю, дуже цікаво, дуже корисно..

  • @savenok.p7778
    @savenok.p7778 Před 2 lety +1

    Дякую за відос!

  • @itemmonk
    @itemmonk Před 2 lety +1

    Дякую!!!

  • @irinasname
    @irinasname Před rokem

    Дякую, кожне ваше відео, це дуже потрібний контент

  • @U-nieskladovaje
    @U-nieskladovaje Před rokem +2

    Дзякуй за добры і цікавы ўрок :)
    P.S. Прыгожа размаўляеш украінскаю

  • @alonahilbert9959
    @alonahilbert9959 Před rokem +1

    Дякую за відео! Коментар для підтримки каналу

  • @vitaliiarts7031
    @vitaliiarts7031 Před 2 lety +4

    Дякую за чудове відео, комент в підтримку каналу.

  • @CaMe_Tak
    @CaMe_Tak Před rokem +1

    Дякуємо за контент

  • @Kyrylenko.V
    @Kyrylenko.V Před 2 lety +1

    о! дякую! Новеньке відео!

  • @Master-xw2oj
    @Master-xw2oj Před 2 lety +3

    Крута українська мова!!! Лайк!!!

  • @juliasamarina8337
    @juliasamarina8337 Před rokem +2

    тепер ми знаємо, як це робити) дякуємо!

  • @user-tq6ss6mk6m
    @user-tq6ss6mk6m Před 2 lety +14

    Дякую! Цікаво) Плануєте найближчим часом курс по реакт?

  • @ivankrashevskyi3837
    @ivankrashevskyi3837 Před 2 lety +1

    Як завжди контент топ, підкину ідею для відео, на intersection observer можна зробити липкий блок, я думаю це був би корисний випуск.

  • @user-sd5gd2qv2h
    @user-sd5gd2qv2h Před rokem +1

    Дякую за солов'їну, побачимось у вересні на курсі

  • @IvanKoshykar_
    @IvanKoshykar_ Před 2 lety +1

    вподобайка, дякую

  • @HelloolleH7
    @HelloolleH7 Před 2 lety +2

    Дякую Вам велике!!!❤️ 🇺🇦

  • @Ukr_sunflower
    @Ukr_sunflower Před 2 lety +1

    Добрий день, Євгене! Чи буде відео на каналі про анімовані таби або JavaScript плагін для їх реалізації?

  • @user-gc1up4yy2h
    @user-gc1up4yy2h Před 2 lety +1

    Дякую за відео

  • @nazaryipyryg6491
    @nazaryipyryg6491 Před 2 lety +5

    Привіт, друже
    Виправ тамкод з «лічільник» на «лічильник»
    Все супер, молодець🇺🇦

  • @user-pf1kl8wl1u
    @user-pf1kl8wl1u Před 2 lety +1

    Зразу ставлю лайк🤗

  • @mr_dysha
    @mr_dysha Před 2 lety +3

    Дуже круто! А ще крутіше, що українською!!!

  • @romank89
    @romank89 Před 2 lety +1

    круте відео)) я колись сам намагався таке зробити, але в мене цифри "домотувались" до потрібного значення нерівномірно - наприклад, якщо було 120, 300, 1000 то 120 і 300 перемотувались приблизно однаково і зупинялись, а 1000 змінювалась далі)) я так і не розібрався з цим))

  • @valentynbilan
    @valentynbilan Před 2 lety +2

    🔥🔥🔥

  • @skrypkan
    @skrypkan Před rokem

    Дякую тобі!

  • @pashapasha4608
    @pashapasha4608 Před 2 lety +1

    Дуже корисна тема, ще й на укр)
    Дякую

  • @borozenniy4561
    @borozenniy4561 Před rokem

    Майже або навіть більша половина мого навчального процесу побудовано на твоїх відео.
    Дякую за класний контент, скоро знайду роботу і обов'язково підпишусь на донати тобі.

  • @Lopa_boba
    @Lopa_boba Před 2 lety +6

    тепер Жека вчить не лише верстці, а й украiнськой мові! Браво!
    У нас уже палять не лише військкомати, а й обласні управління фсб. :)

  • @vitalich8499
    @vitalich8499 Před 2 lety +1

    Дякуємо) Окремий лайк за Українську)

  • @user-xs8ty9dg5s
    @user-xs8ty9dg5s Před 2 lety +1

    Дзякую!!!!!!!!!!!!!!!!!!!!!!!

  • @justkrem7764
    @justkrem7764 Před 2 lety +1

    Єх, я чомусь подумав про "спінер" лічильник, коли ти щось відправляєшь і він крутится допоки не прийде відповідь від сервера, якось хотів застосувати, але щось не вийшло. Такий як на відео лічильник використовував, правда в версії попростіше, просто завантажив плагін лічильника. Лайк все одно за відео та vanilla js!

    • @avi0vitality
      @avi0vitality Před 2 lety

      При запуску запиту крутиш спінер, а в обробнику пишеш стоп спінер функцію, коли запит повернеться запуститься твій обробник запиту і зупинить спінер, напевно тут можна неускладнювати завдання.

  • @web2905
    @web2905 Před 2 lety +1

    Спасибо

  • @user-wy1qd5oi3v
    @user-wy1qd5oi3v Před 2 lety +2

    👌

  • @user-ds9jt2st9g
    @user-ds9jt2st9g Před rokem

    Супер, знайшов те що хотів. Ти найкращий)

  • @user-gr3rv2yb7p
    @user-gr3rv2yb7p Před 2 lety +1

    Кількість переглядів вражає добре, що почав робити контент для України!

  • @vladyslavb6788
    @vladyslavb6788 Před 2 lety +1

    Найкращий 🫡

  • @maksymyakovchenko4796
    @maksymyakovchenko4796 Před 2 lety +1

    Привіт "Фрілансер по життю" !
    Велике дякую тобі, за те що й досі снімаєш заради нас !
    Вибач, но можеш зробити відео про аудіо?

  • @zhanna8166
    @zhanna8166 Před rokem +1

    Добры ўрок! Дзякуй! А каму не зразумела , то час задумацца чаму

  • @DenisenkoVlad
    @DenisenkoVlad Před 2 lety +9

    Доброго ранку! Ми з України!

  • @anastasiamorozova7506
    @anastasiamorozova7506 Před 2 lety +2

    Це для мене магія. Хотілось би зайнятись версткою, але лячно, що нічого не вийде. Тому поки що відео піддивляюсь. Дякую

  • @liliianigthfury
    @liliianigthfury Před 2 lety +1

    Дякую за контент! У вас чудова українська!!!

  • @valeriewinter6217
    @valeriewinter6217 Před 2 lety +1

    Уррра Жека повернувся! Щось давненько вже відео вже не було

  • @user-fc8nh4mm4z
    @user-fc8nh4mm4z Před 2 lety +4

    1. Зрозуміло. 2. Цікаво. 3. Корисно. Ну все як завжди - на висоті, розкішний український контент!

  • @inokentiyMay
    @inokentiyMay Před 2 lety

    Чи плануються курси по просунутому JS і по фреймворках?

  • @antonyanovskyi6762
    @antonyanovskyi6762 Před 2 lety +1

    Круто

  • @helenahoncharenko1341
    @helenahoncharenko1341 Před 2 lety +3

    Лайк, ще не дивлячись 👍🏼

  • @user-mc8tg5ov7p
    @user-mc8tg5ov7p Před 2 lety +3

    Як красиво це все чути українською❤️‍🔥❤️‍🔥❤️‍🔥дякую Вам!

  • @AkimotoTaikiChan
    @AkimotoTaikiChan Před 2 lety +2

    Спасиб Бро

  • @HelloolleH7
    @HelloolleH7 Před 2 lety

    Доброго дня! Якщо у Вас буде натхнення і можливість, чи не могли б Ви будь ласка показати як правильно робити пагінацію контенту на сторінці, на приклад товарів чи послуг в магазині. Не порахуйте за наглість) дякую вам за Вашу роботу! Якщо вже на каналі було пояснення, то натякніть будь ласка)

  • @user-bs7re7mz7k
    @user-bs7re7mz7k Před rokem

    Дякую! Головне не зупиняйся!

  • @user-zm9tm3jw1l
    @user-zm9tm3jw1l Před 2 lety

    цікаво,а яка тема використовується у vs code?

  • @andriymartynovskyj403
    @andriymartynovskyj403 Před 2 lety

    привіт, я web backend developer з п'ятирічним досвідом, вже більше місяця дивлюсь твої уроки, вони чудові). Я хочу стати full stack, знаю більшість css селекторів але немаю практики. Чи цікавить тебе менторство?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  Před 2 lety

      Привіт, є можливість консультацій www.patreon.com/freelancerlifestyle
      але все необхідне є на каналі

  • @Rasty_Boss
    @Rasty_Boss Před 2 lety +1

    круто, підкажи будь ласка скільки часу пішло в тебе щоб написати цей функціонал, хочу орінтуватися скільки б я на це витратив

  • @FlexB608
    @FlexB608 Před 2 lety +1

    шикарний ролик, так любо слухати українською

  • @lainde5595
    @lainde5595 Před 2 lety +4

    🇰🇬🇺🇦

  • @sauronin2058
    @sauronin2058 Před 2 lety

    + підтримка

  • @Nermenger
    @Nermenger Před 2 lety +2

    А ещё спасибо большое за доп. уроки украинского!) Учить параллельно язык - это прикольно)

  • @user-es3zi9kv2g
    @user-es3zi9kv2g Před 2 lety +3

    🇰🇿🇺🇦

  • @farkhodcastro1590
    @farkhodcastro1590 Před 2 lety +1

    Спасибо за видео. Жалко я плохо понимаю по украинский 👍

    • @glonas73
      @glonas73 Před rokem

      Ты разве не видишь что это кино для избранных :)))))

  • @user-cl8iz4zt3m
    @user-cl8iz4zt3m Před 2 lety

    Привіт) Хто користується шаблоном, не підскажете, чи є данний функціонал в ньому?

  • @maf_doooc1113
    @maf_doooc1113 Před 2 lety +17

    Блин жаль конечно что не на русском(((( а так до этого постоянно смотрел, крутой канал реально! Спасибо за ранние видео!

    • @mikhailmuraviev3316
      @mikhailmuraviev3316 Před 2 lety +3

      Все, Путен отменил русский язык🤪. хотя Женю безусловно уважаю

    • @Nermenger
      @Nermenger Před 2 lety +2

      А как по мне даже лучше, я хоть и не очень хорошо знаю его, но процесс создания я понял прекрасно. Спасибо за видео!)

    • @redm4n
      @redm4n Před 2 lety

      @@Nermenger если бы хотя бы субтитры на русском были - было бы круто

    • @deviant6646
      @deviant6646 Před 2 lety +4

      Срусский тут нікому не треба 🖕🏻

    • @mikhailmuraviev3316
      @mikhailmuraviev3316 Před 2 lety

      Ну когда вы победите русский будет не треба нигде

  • @deviant6646
    @deviant6646 Před 2 lety

    У мене при виборі картинки вибір дублюється, чи пов'язано це з чертогами (у мене 3 версія)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  Před 2 lety +1

      Так, треба налаштувати плагін з аліасами. Дивись документацію шаблона

    • @deviant6646
      @deviant6646 Před 2 lety

      @@FreelancerLifeStyle Дякую👍

  • @mr.targimskiy3215
    @mr.targimskiy3215 Před 2 lety +2

    Не понимаю украинский, но звучит прикольно

  • @user-lt1dh8yw6f
    @user-lt1dh8yw6f Před 2 lety

    личыльнык))))))))))))))))))))))))
    сначала чет орнул)

  • @tar7sha
    @tar7sha Před rokem

    цікаво було б глянути як зробити анімоване колесо прогресу

  • @sonqey
    @sonqey Před 2 lety +2

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

    • @qp7543
      @qp7543 Před 2 lety

      Слейся клоун😂

    • @sonqey
      @sonqey Před 2 lety

      @@qp7543 что?

    • @sonqey
      @sonqey Před 2 lety

      @@justaman2312 , так ведь канал был русскоязычным раньше, а украинский достаточно сильно похож на русский, и его можно понять, зная лишь русский. А аналогия с самолётом тут неуместна

    • @BohdanVR666
      @BohdanVR666 Před rokem

      @@sonqey російська схожа з українською лише на 62%, коли наприклад білоруська - на 82 а польська - на 70

  • @Pet-Beds-Club
    @Pet-Beds-Club Před rokem

    Ребята как в чертогах выключить повтор анимации счетчика при скроле?
    Там код отличается

  • @Kotychka_Nyashnaya
    @Kotychka_Nyashnaya Před 2 lety +6

    Эх, красивый украинский язык, жаль, что я его плохо понимаю :/ хотя, говорят, если долго слушать, то начинаешь привыкать)

    • @vikinglego4946
      @vikinglego4946 Před 2 lety +1

      І тут у Вас з'являється чудова причина вивчити його!

    • @olesyan6781
      @olesyan6781 Před 2 lety +1

      Он даже более понятный, чем белорусский.

    • @Kotychka_Nyashnaya
      @Kotychka_Nyashnaya Před 2 lety

      @@olesyan6781 кстати, да! Белорусский вообще для меня труднопонимаем, даже читать его тяжело, увы, но он тоже красивый)

    • @Kotychka_Nyashnaya
      @Kotychka_Nyashnaya Před 2 lety

      @@vikinglego4946 попробую, пожалуй :)

    • @zhanna8166
      @zhanna8166 Před rokem +1

      @@Kotychka_Nyashnaya , да ну. Яны вельмі падобныя, калі будзеце разумець украінскую мову, тады і беларускую ў той жа час і наадварот )

  • @horlord502
    @horlord502 Před 2 lety +1

    что обозначает на Js этот символ ( ^ ) помогите