Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

Подготовка

Нам нужно поле для ввода пароля, немного CSS и немного JavaScript-кода.

HTML очень простой — поле ввода, кнопка, и всё это обёрнуто в <div>, чтобы было удобнее трясти:

<div class="input-container">
  <input id="passwordInput" type="password" placeholder="Введите пароль">
  <button onclick="checkPassword()">Submit</button>
</div>

Первая часть стилей — контейнер для поля ввода и кнопки шириной 300 пикселей (можно сколько угодно).

.input-container {
  position: relative;
  width: 300px;
}

Анимация тряски

Вторая часть — ключевые кадры анимации, которая называется shake. Мы будем её использовать ниже:

@keyframes shake {
  10%, 90% {
    transform: translateX(-0.5px);
   }
  20%, 80% {
    transform: translateX(1px);
  }
  30%, 50%, 70% {
    transform: translateX(-2px);
  }
  40%, 60% {
    transform: translateX(2px);
  }
}

Эта анимация «трясёт» элемент горизонтально влево и вправо.

В начале (на 10% времени анимации) и ближе к концу (на 90%) элемент двигается немного влево на пол пикселя. Затем, на 20% и 80% времени, он двигается вправо на пиксель. После этого, на 30%, 50% и 70% времени, элемент смещается сильнее влево на 2 пикселя, и, наконец, на 40% и 60% времени он смещается ещё сильнее вправо на 2 пикселя.

Кривые Безье

Класс shake отвечает за запуск анимации. Он немного сложный, но мы всё объясним.

.shake {
  animation: shake 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

Простыми словами:

• shake — название анимации.
• 0.5s — продолжительность анимации. В нашем случае — полсекунды.
• cubic-bezier(0.68, -0.55, 0.27, 1.55) — функция задает скорость анимации в разные моменты времени. Она определяет, как быстро или медленно будет идти анимация в разные моменты. Например, наша анимация начнется быстро, затем замедлится, и снова ускорится в конце. Это делает анимацию более «живой» и интересной.
• both: Это говорит браузеру начинать и заканчивать анимацию на основе её времени начала и конца. Если бы мы указали значение forwards, после завершения анимации стиль элемента остался бы таким же, как в конце анимации. Если бы это было backwards, то стиль бы вернулся к исходному состоянию до начала анимации. both просто сочетает оба этих эффекта.

В общем, этот код делает так, что при добавлении класса shake к элементу он будет «трястись» в течение полсекунды определённым, «живым» образом.

Подробнее про кривые Безье (сложно)

Эта часть может быть сложноватой, если вы не любите математику. Но тем не менее, нужно объяснить.

Хочу разобраться

JS для проверки пароля

Сразу скажем, что это ненастоящая функция — лучше так не делать в реальных проектах. Мы используем этот код только для демонстрации.

/* Функция для проверки введённого пароля */
function checkPassword() {
  /* Получаем элемент поля ввода */
  var input = document.getElementById('passwordInput');
  /* Получаем значение из поля ввода */
  var password = input.value;
    
  if (password !== 'secret') {
    /* Если пароль неправильный, добавляем класс 'shake' для анимации */
    input.classList.add('shake');
    /* Через 600 мс (продолжительность анимации) удаляем класс 'shake' */
    setTimeout(function() {
      input.classList.remove('shake');
    }, 600);
  }
}

После нажатия на кнопку функция checkPassword() проверяет, что введённый пароль совпадает со словом secret. И если да — полю ввода добавляется анимация тряски с помощью класса shake.

И всё — получается вот так. Нажмите кнопку и потрясите пароль.

🐈