Skip to main content
adicionou 1 caractere ao conteúdo
Fonte Link
user157849
user157849

Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clicaclicar em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão Login.

Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clica em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão Login.

Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clicar em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão Login.

Fonte Link
user157849
user157849

Fácil, pense comigo apertei no botão Login a animação tem que ir para a direita então.

animation.classList.add("animationToRight");

Ok, a animação foi para a direita, mas agora vamos apertar no botão Sing Up a animação tem que volta para a esquerda então.

animation.classList.add("animationToLeft");

Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clica em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão Login.

animation.classList.add("animationToRight");
animation.classList.remove("animationToLeft");

E para o botão Sing Up.

animation.classList.add("animationToLeft");
animation.classList.remove("animationToRight");

Quando você apertar no botão Login a animação vai ir para a direita e vai remover a animação da esquerda caso se tiver. Quando apertar no botão Sign Up a animação da esquerda vai ser adicionada e a animação da direita sera removida. Só isso, e vai ficar neste loop segue o código.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>particles.js</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="stylesheet" media="screen" href="css/login.css">
  <style>
h2 {

font-size: 28px;
color: #C1C4D6;
}
p{
font-size: 14px;
color: #C1C4D6;
padding: 15px 0px 20px;
display: block;


}

.retangle {

padding-top: 50px;
padding-left: 100px;
padding-right: 100px;
height: 300px;
width: 600px;
line-height: 50px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
background-color: rgb(0, 0, 0, 0.55);
border-radius: 3px;
opacity: 0.90;
}

.questionSingUp {
position: absolute;
border:solid 1px;
border-color: red;
width: 270px;
height: 200px;

}

.questionLogin {
position: relative;
border:solid 1px;
border-color: pink;
width: 270px;
height: 200px;
float: right;
}

.actionSingUp {
position: absolute;
border:solid 1px purple;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.actionSingIn {
position: relative;
margin-left: 329px;
border:solid 1px green;
width: 270px;
height: 100px;
background-color: rgb(58,58,58);
}

.loginActionWrap {
height: 450px;
width: 370px;
line-height: 50px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -365px;
background-color: rgb(255,255,255);
border-radius: 3px;
box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45);


}
#singUpBtn{
display: inline-block;
border: solid 1px #C3C3C3;
color: #C3C3C3;
min-width: 140px;
border-radius: 5px;
line-height: 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;

}

#loginBtn {
display: inline-block;
border: solid 1px #C3C3C3;
color: #C3C3C3;
min-width: 140px;
border-radius: 5px;
line-height: 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}


.animationToRight {
-webkit-animation: mymoveRight 5s ; /* Safari 4.0 - 8.0 */
animation: mymoveRight 1.3s ;
-webkit-animation-fill-mode: forwards;
}

.animationToLeft {
-webkit-animation: mymoveLeft 5s ; /* Safari 4.0 - 8.0 */
animation: mymoveLeft 1.3s ;
-webkit-animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */


@keyframes mymoveRight {
  from {left: 635px;}
  to {left: 990px;}
}

@keyframes mymoveLeft {
  from {left: 990px;}
  to {left: 635px;}
}      
  </style>
</head>
<body>
<!-- particles.js container -->
<div id="particles-js">
<!--Login-->
  <div class="retangle">
    <div class="questionSingUp">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="singUpBtn"> <span>Sing up</span> </a>
    </div>

    
    <div class="questionLogin">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="loginBtn"><span>Log in</span></a>
    </div>
    <div class="actionSingUp">
      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>

          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->
    </div>

    <div class="actionSingIn">

      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>
          <a href="#" class="forgotPass"><span>Forgot password</span> ?</a>
          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->

    </div>

  </div>
  <div id="divAnimation" class="loginActionWrap"></div>
</div>


<!--End Login-->

<!-- scripts -->
<script src="../particles.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>

<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script src="js/funcionalidade.js"></script>

<script>

var changeToLogin = document.getElementById("loginBtn");
var animation = document.getElementById("divAnimation");
var changeToSingUp = document.getElementById("singUpBtn");

changeToLogin.addEventListener('click', function() {
    animation.classList.add("animationToRight");
    animation.classList.remove("animationToLeft");

  console.log("clicado");
});

changeToSingUp.addEventListener('click', function() {
    animation.classList.add("animationToLeft");
    animation.classList.remove("animationToRight");
  console.log("clicado");
});

</script>

</body>
</html>