J'essaie de faire bouger les boutons. Par exemple, lorsque je clique sur un bouton, le bouton doit se déplacer avec une animation d'un endroit à un autre.

Voici mon code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
* @media screen and (max-width: 768px) {
}
@keyframes heading
{
    from {top:350px;}
    to   {top:300px;}
}
@keyframes quote
{
    from {top:290px}
    to {top: 240px}
}
@keyframes button
{
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes mvbut
{
    from {top: 266px; right: 185px}
    to {top: 250px; right: 170px;}
}
.button
{
    background-color: white;
    color: black;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
}
.button1
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 266px;
    right: 185px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
.button1:hover
{
    background-color: black;
    color: white;
}
.button3:click
{
    animation-name: mvbut;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.button2
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 210px;
    left: 0px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2.3s;
    animation-fill-mode: forwards;
}
.button2:hover
{
    background-color: black;
    color: white;
}
.button3
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 154px;
    left: 185px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    height: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2.6s;
    animation-fill-mode: forwards;
}
.button3:hover
{
    background-color: black;
    color: white;
}
@font-face 
{
    font-family: beatsurge;
    src: url(neutronium.ttf);
}
p.border 
{
    border-style: solid;
    border-width: 2px;
    padding: 20px;
    position: absolute;
    border-radius: 50px 20px;
    position: absolute;
}
body
{
    background-image: url("background.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}
h1
{
    color: white;
    font-family: beatsurge;
    font-size: 100px;
    text-align: center;
    top: 350px;
    left: 0px;
    position: relative;
    animation-name: heading;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;  

}
p
{
    font-size: 20px;
    text-align: center;
    color: white;
    position: relative;
    top: 290px;
    left: 0px;
    animation-name: quote;
    animation-duration: 1s;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
}
</style>
<title>Beat Surge</title>
</head>
<body>
<div><h1><strong>BEAT SURGE</strong></h1></div>
<p>
Where words fail, music speaks.
</p>
<button class = "button button1">Remixes</button>
<button class = "button button2">Original Content</button>
<button class = "button button3">About Us</button>
</body>
</html>

Par exemple, lorsque je clique sur "Remixes", le bouton doit se déplacer dans le coin inférieur gauche.

0
PseudoDev 13 avril 2018 à 20:41

3 réponses

Meilleure réponse
   function movebutton() {
        document.getElementById("button1").style.top = "400px";
        document.getElementById("button1").style.left = "30px";
    }
button{
  position: absolute;
  top:30px;
  left:400px;
  transition: 0.5s linear;
}
<html>
  <head>
    <title>Beat Surge</title>
  </head>
  <body>
    <button id = "button1" onclick="movebutton()">Remixes</button>
  </body>
</html>
1
JacopoDT 13 avril 2018 à 18:19

Vous pouvez le faire de plusieurs façons. Pour une solution simple, j'ai utilisé margin-left et un simple toggleClass

Une autre alternative pourrait être d'utiliser des animations de positionnement absolu ou jquery.

var _box = $('.box');

_box.on('click', function() {
  $(this).toggleClass('move');
});
.box {
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.5s ease;
}

.box:hover {
  cursor: pointer;
}

.box.move {
  margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>
1
StefanBob 13 avril 2018 à 17:49

Vous devriez vraiment fournir plus d'informations dans votre question, mais: si je faisais cela, je donnerais au bouton une fonction d'écoute de clic qui a ajouté une classe css, puis utiliser css pour gérer le placement des éléments. Utilisez des transitions CSS pour votre animation.

document.querySelector('button').addEventListener('click', move);

function move(e) {
  e.target.classList.toggle('moved');
}
button {
  position: absolute;
  top: 40vh;
  left: 40vw;
  transition: all .2s;
}

.moved {
  top: 80vh;
  left: 4vw;
}
<button>Clicky</button>
0
wassona 13 avril 2018 à 17:53