0

уважаемые программисты! Пропала анимация текста, после того как добавил модальное окно регистрации и входа. Буду благодарен за помощь!

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&family=Poppins:wght@200&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Night Music | Music for deep thoughts</title>
  </head>
  <body>
    <header>
      <h2 class="logo">Night Music</h2>
      <nav class="navigation">
        <a href="#">Home</a>
        <a href="./about.html">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        <button class="btnLogin-popup">Login</button>
      </nav>
    </header>

    <main>
      <div class="wrapper">
        <h1 class="title">Music for deep thoughts</h1>
        <a href="./music_list.html" class="gotolisten-btn"
          >Go to listen &#9658;</a
        >
        <span class="icon-close"
          ><ion-icon name="close-outline"></ion-icon
        ></span>
        <div class="form-box login">
          <h2>Login</h2>
          <form action="#">
            <div class="input-box">
              <span class="icon"
                ><ion-icon name="mail-outline"></ion-icon
              ></span>
              <input type="email" required />
              <label>Email</label>
            </div>
            <div class="input-box">
              <span class="icon"
                ><ion-icon name="lock-closed-outline"></ion-icon
              ></span>
              <input type="password" required />
              <label>Password</label>
            </div>
            <div class="remember-forgot">
              <label><input type="checkbox" /> Remember me</label>
              <a href="#">Forgot Password?</a>
            </div>
            <button type="submit" class="btn">Login</button>
            <div class="login-register">
              <p>
                Don't have account?
                <a href="#" class="register-link"> Register</a>
              </p>
            </div>
          </form>
        </div>

        <div class="form-box register">
          <h2>Registration</h2>
          <form action="#">
            <div class="input-box">
              <span class="icon"
                ><ion-icon name="person-circle-outline"></ion-icon
              ></span>
              <input type="text" required />
              <label>Username</label>
            </div>
            <div class="input-box">
              <span class="icon"
                ><ion-icon name="lock-closed-outline"></ion-icon
              ></span>
              <input type="password" required />
              <label>Password</label>
            </div>
            <div class="remember-forgot">
              <label
                ><input type="checkbox" /> I agree to the rules for site</label
              >
            </div>
            <button type="submit" class="btn">Login</button>
            <div class="login-register">
              <p>
                Already have account? <a href="#" class="login-link"> Login</a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </main>

    <script src="./script.js"></script>
  </body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url("./img/main_img.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}

.logo {
  font-size: 2em;
  color: #fff;
  user-select: none;
}

.navigation a {
  position: relative;
  font-size: 1.1em;
  color: #fff;
  text-decoration: none;
  font-weight: 1000;
  margin-left: 40px;
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 5px;
  transform: scaleX(0);
  transition: transform 0.5s;
}

.navigation a:hover::after {
  transform: scaleX(1);
}

.navigation .btnLogin-popup {
  width: 130px;
  height: 50px;
  background: transparent;
  border: 2px solid #fff;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  color: #fff;
  font-weight: 1000;
  margin-left: 40px;
  transition: transform 0.5s;
}

.navigation .btnLogin-popup:hover {
  box-shadow: inset 0 -100px 0 0 #fff;
  background: #fff;
  color: #8400ff;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 400px;
  height: 440px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  align-items: center;
  overflow: hidden;
  transform: scale(0);
  transition: transform .5s ease, height .2s ease;  
}

.wrapper.active-popup {
  transform: scale(1);
}

.wrapper.active {
  height: 520px;
}

.title {
  user-select: none;
  font-size: 100px;
  width: 20ch;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  animation: printed-text 3s ease;
}

@keyframes printed-text {
  from {
    width: 0;
  }
}

@keyframes show-btn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.txt {
  color: #fff;
}

.gotolisten-btn {
  opacity: 0;
  color: #fff;

  font-weight: 300;
  animation: show-btn 0.2s ease;
  animation-fill-mode: forwards;
  animation-delay: 4s;
  width: 100%;

  text-align: right;
  text-decoration: none;
  font-size: 50px;
}

.wrapper .form-box {
  width: 100%;
  padding: 40px;
}

.wrapper .form-box.login {
  transition: transform .18s ease;
  transform: translateX(0);
}

.wrapper.active .form-box.login {
  transition: none;
  transform: translateX(-400px);
}

.wrapper .form-box.register {
  position: absolute;
  transition: none;
  transform: translateX(400px);
}

.wrapper.active .form-box.register {
  transition: transform .18s ease;
  transform: translateX(0);
}

.wrapper .icon-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: #162938;
  font-size: 2em;
  color: #162938;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 20px;
  cursor: pointer;
  z-index: 1;
}

.form-box h2 {
  font-size: 2em;
  color: #162938;
}

.input-box {
  position: relative;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #162938;
  margin: 30px 0;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #162938;
  font-weight: 500;
  pointer-events: none;
  transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label {
  top: -5px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  color: #162938;
  font-weight: 600;
  padding: 0 35px 0 5px;
}

.input-box .icon {
  position: absolute;
  right: 8px;
  font-size: 1.2em;
  color: #162938;
  line-height: 57px;
}

.remember-forgot {
  font-size: .9em;
  color: #162938;
  font-weight: 500;
  margin: -15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.remember-forgot label input {
  accent-color: #162938;
  margin-right: 3px;
}

.remember-forgot a {
  color: #162938;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  height: 45px;
  background: #162938;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1em;
  color: #fff;
  font-weight: 500;
}

.login-register {
  font-size: .9em;
  color: #162938;
  text-align: center;
  font-weight: 500;
  margin: 25px 0 10px;
}

.login-register p a {
  color: #162938;
  text-decoration: none;
  font-weight: 600;
}

.login-register p a:hover {
  text-decoration: underline;
}

script.js

const wrapper = document.querySelector('.wrapper');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');
const btnPopup = document.querySelector('.btnLogin-popup');
const iconClose = document.querySelector('.icon-close');

registerLink.addEventListener('click', ()=>{
    wrapper.classList.add('active');
})

loginLink.addEventListener('click', ()=>{
    wrapper.classList.remove('active');
})

btnPopup.addEventListener('click', ()=>{
    wrapper.classList.add('active-popup');
})

iconClose.addEventListener('click', ()=>{
    wrapper.classList.remove('active-popup');
})

1 ответ 1

0

В css необходимо явно указать, что при сбросе класса элемента active-popup анимацию необходимо сбросить на значение none, а при открытии модального окна снова добавить анимацию элементу .title

Самое простое решение, включить строки ниже в css. Однако можно внедрить их в существующие правила

.wrapper .title {
  animation: none;
}
.wrapper.active-popup .title {
  animation: printed-text 3s ease;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.