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