Волновой эффект для текста

Создание динамичных и отзывчивых интерфейсов — ключ к современному веб-дизайну. С помощью такого фреймворка, как Vue.js, реализация сложных анимаций становится значительно проще и эффективнее. Vue реактивная система и декларативный подход позволяют управлять анимацией состояния элементов интуитивно и с минимумом кода.

Яркий пример — этот волновой эффект для текста в тегах label. Когда пользователь кликает на поле ввода, буквы подписи «всплывают» волной, создавая запоминающееся и плавное взаимодействие. Такой компонент отлично подойдет для форм входа или регистрации, чтобы сделать их более живыми и интерактивными.

Посмотрите на эффект в действии прямо сейчас — кликните на поля ввода ниже:

<div id="app">
  <div class="container" @click="handleClick">
    <form class="form">
      <p class="form__title">Вход в аккаунт</p>
      <div class="form__control" v-for="(input,index) in inputs" :key="index">
        <label :for="input.name">
          <span :class="{move: input.focused || input.value}" :style="`transition-delay : ${index * 50}ms`" v-for="(letter,index) in input.label" :key="index">{{ letter }}</span>
        </label>
        <input class="form__input" :type="input.name" :name="input.name" :id="input.name" v-model="input.value">
      </div>
      <button class="form__btn" @click.prevent>Войти</button>
      <p class="form__info">Нет аккаунта? <a href="#">Регистрация</a>
      </p>
    </form>
  </div>
</div>

#app {
  position: relative;
  height: 100%;
}
.container {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.form {
  display: grid;
  gap: 30px 0;
  padding: 40px;
  color: #fff;
  background-color: #1B4F72;
  border-radius: 10px;
}
.form__title {
  font-size: clamp(24px, 1.3261rem + 0.8696vi, 32px);
  font-weight: 500;
  text-align: center;
}
.form__control {
  --tr: .2s ease-in-out;
  display: grid;
  padding-block-end: 10px;
  border-block-end: 2px solid #fff;
}
.form__control label {
  inline-size: -moz-max-content;
  inline-size: max-content;
  font-size: 20px;
}
.form__control label span {
  display: inline-block;
  transform: translateY(30px);
  transition: transform var(--tr);
}
.form__control label span.move {
  transform: translateY(0);
}
.form__input {
  color: #fff;
  background-color: transparent;
  border: none;
}
.form__input:focus-visible {
  outline: none;
  caret-color: #fff;
}
.form__btn {
  padding-block: 15px;
  color: #1B4F72;
  background-color: #85C1E9;
  font-size: 21px;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.form__info {
  display: grid;
  gap: 10px 0;
  text-align: center;
}
.form__info a {
  color: #85C1E9;
}

const {createApp, ref} = Vue
createApp({
    setup(){
        const inputs = ref([
            {
                name: 'email',
                label: 'Email',
                focused: false,
                value: '',
            },
            {
                name: 'password',
                label: 'Пароль',
                focused: false,
                value: '',
            },
        ])
        function handleClick(e) {
			let target = e.target
			if (!target.classList.contains('form__input')) {
				for (let input of inputs.value) {				
					input.focused = false							
				}
				return	
			}
			let name = e.target.getAttribute('type')			
			for (let input of inputs.value) {
				if (name === input.name) {
					input.focused = true
				} else {
					input.focused = false
				}				
			}
		}
        return {inputs, handleClick}
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как работает этот волновой эффект?

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

HTML-структура

Основана на компоненте Vue. Форма содержит цикл v-for, который динамически создает поля ввода на основе массива inputs. Каждый label обертывает свой текст в отдельные span для каждой буквы — это ключ к поэтапной анимации.

CSS-стили

Отвечают за внешний вид и саму анимацию.

Буквы внутри label изначально сдвинуты вниз на 30 пикселей transform: translateY(30px).
Класс .move возвращает их в исходное положение transform: translateY(0).
Магия «волны» создается с помощью динамически рассчитанной transition-delay для каждого span. Задержка вычисляется как index * 50ms, что заставляет каждую следующую букву анимироваться с небольшим опозданием.

Логика на Vue.js (JavaScript)

Это «мозг» компонента.

Состояние: Массив inputs содержит объекты для каждого поля, хранящие его имя, текст label, флаг активности focused и значение value.
Обработчик клика handleClick: При клике в любую область формы этот метод определяет, было ли нажатие на поле ввода.
Если клик был не по полю, все флаги focused сбрасываются в false, и подписи возвращаются в исходное состояние (если поле не заполнено).
Если клик был по полю ввода, для соответствующего поля устанавливается focused: true, что добавляет класс move к спану букв его подписи, запуская волновую анимацию.

Использование Vue делает управление этими состояниями невероятно простым. Изменение данных в inputs автоматически обновляет DOM, активируя или деактивируя анимацию.

Хотите внедрить такие решения на своем сайте?

Этот волновой эффект — лишь один из примеров того, как креативный подход и современные технологии могут преобразить пользовательский интерфейс.

Наша веб-студия готова создать сайты, а также уникальные, интерактивные и запоминающиеся компоненты, которые выделят ваш сайт на фоне конкурентов и улучшат взаимодействие с пользователями. От сложных анимаций до удобных интерфейсов — мы воплотим ваши идеи в жизнь.

Свяжитесь с нами, чтобы обсудить ваш проект!

Предыдущий Следующий