Анимация стартовой страницы - PullRequest
Новая
       24

Анимация стартовой страницы

0 голосов
/ 06 августа 2020

Я пытаюсь создать анимацию для своей домашней страницы при ее первой загрузке. Я хочу, чтобы мяч, который я должен подниматься, поднимался из нижней части страницы, но как только он переместится в середину, пользователь сможет щелкнуть по нему и развернуть его на всю страницу. У меня есть код повышения мяча, который находится здесь: 

*, *::after, *::before {box-sizing: inherit;}

html{
    box-sizing: border-box;
}

body{
    margin: 0; 
    padding: 0;
    overflow: hidden;
}

.ball{
    background-color: #eb8c28; 
    width: 100px;
    height: 100px;
    border-radius: 0%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    animation: rise;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes rise{
    0%{
        border-radius: 50%;
    }
    100%{
        border-radius: 50%;
        transform:translateY(-100%);
    }

    75%{
        border-radius: 40%;
    }

    80%{
        border-radius: 30%;
    }

    90%{
        border-radius:20%;
    }
    100%{
        transform: scale(20,20);
    }
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ballcopy.css">
        <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
                <div class="ball"></div>
        </main>
    </body>
</html>

Однако я застрял в том, что делать для масштабирования мяча на всю страницу. Должен ли я создать еще один div и сделать его интерактивным, или есть способ создать анимацию, которая интерактивна на полпути, чтобы завершить анимацию, используя JS.

1 Ответ

1 голос
/ 06 августа 2020

Вы можете использовать Javascript, чтобы добавить класс к элементу ball (например, click), а затем установить новую анимацию для запуска после установки класса. По сути, он разбивает исходную анимацию на две части. 

// Get the ball element
let ball = document.getElementsByClassName("ball");
// First instance of the ball object, add a click listener.
ball[0].addEventListener('click', (event) => {
  // add the click class
  ball[0].classList.add('click');
});
*,
*::after,
*::before {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ball {
  background-color: #eb8c28;
  width: 100px;
  height: 100px;
  border-radius: 0;
  position: absolute;
  bottom: 0%;
  /* Added calc here to center the ball */
  left: calc(50% - 50px);
  animation: rise;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.ball.click {
  animation: fill;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes rise {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 50%;
    transform: translateY(-100%) scale(1);
  }
}

@keyframes fill {
  0% {
    border-radius: 50%;
    transform: translateY(-100%) scale(1);
  }
  100% {
    border-radius: 0;
    transform: translateY(-100%) scale(20);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="ballcopy.css">
  <meta name="veiwport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <main>
    <div class="ball"></div>
  </main>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...