Показываю залипательный эффект печатающегося текста отдельно и на реальном сайте.
Полный разбор кода, исходники и пошаговую инструкцию ищите в следующем видео на канале!
Нужен сайт? Пиши в личку в телеге - @Igaio
Сохраняйте ролик в закладки и пишите в комментариях, для каких проектов планируете использовать такую фишку. 👇
#js #css #shortsvideos #webanimation #webdeveloper #вебразработка #анимация #сайт
Сначала показываю пример из сети, потом — мою реализацию лебёдки на сайте. Если хочешь разбор кода — нажми «В топ». Подписывайся, чтобы не пропустить продолжение.
Нужен сайт? Пиши в личку в телеге - @Igaio
#Shorts #вебразработка #анимация #сайт #html #css #javascript
Сравниваю оригинал из шаблона Wandau и собственную реализацию.
В оригинале — Swiper и locomotive-scroll. У меня — чистый HTML, CSS и JavaScript, без единой библиотеки.
Фон листается вверх-вниз, текст — влево-вправо. Внутри: translate3d для движения, клоны слайдов для бесшовной прокрутки, синхронизация индикаторов с автоплеем, свайпы, клавиатура и пауза при наведении.
Код открыт в телеге https://t.me/htmlInspiration — забирайте и адаптируйте под свой проект: меняйте картинки, скорость и тайминги.
Моя реализация эффекта курсора с изменением цвета + волну добавил.
Всё работает на IntersectionObserver для появления и на CSS-переходах для волновой анимации букв при наведении. Кастомный курсор, который увеличивается над заголовком, тоже прилагается.
Если захотите повторить — забирайте код из телеги, крутите цвета, скорость волны и задержки.
https://t.me/htmlInspiration