CODEWITHSUNDEEP
javascriptcssanimation
Alejandro Vargas
Alejandro Vargas

Reputation: 25

Starting page animation

I'm trying to create an animation for my homepage when it first loads. I want the ball that I have to rise from the bottom of the page but once it goes to the middle the user to be able to click it and for it to expand to the whole page. I have the ball rising code which is here:

*, *::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>

However, I'm stuck on what to do for the scaling of the ball to the whole page. Should I create another div and have it be clickable or is there a way to create an animation that is clickable halfway to complete the animation using JS.

Upvotes: 0

Views: 320

Answers (1)

disinfor
disinfor

Reputation: 11558

You can use Javascript to add a class to the ball element (e.g. click), and then set a new animation to run once the class is set. It basically splits your original animation into two.

// 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>

Upvotes: 1

Related Questions