CODEWITHSUNDEEP
htmlcsscss-animations
Alejandro Vargas
Alejandro Vargas

Reputation: 25

CSS animation to be responsive after done

I want my animation to be responsive height wise when the screen gets smaller. So far I got it to work with the width of the screen but not the height. I want the circle to remain at the top of the screen after the animation even when the screen is minimized. When I make it smaller right now it makes me scroll to see it. I will attach my code at the bottom.

<!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>
      <img src="image/Drizzy.jpg" alt="happy day's logo" class="logo">
    </div>
  </main>
  <script src="ball.js"></script>
</body>
</html>

CSS

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

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}


.logo {
  width: 100px;
  height: 100px;
  border-radius: 0;
  position: absolute;
  bottom: 0%;
  left: calc(50% - 50px);
  animation: rise;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


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

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

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

JS

let logo = document.getElementsByClassName("logo");

logo[0].addEventListener('click', (event) => {

    logo[0].classList.add('click');
});

Upvotes: 1

Views: 418

Answers (1)

The Cat Coder
The Cat Coder

Reputation: 103

I think it is easier to animate this type of stuff using jQuery. jQuery is an external API, which are really fancy words but just think of jQuery as a shorthand way of writing common code in javascript.

To import it into your files, add...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

...into the head of your main HTML file. Make sure you put this code BEFORE you link to your javascript file "ball.js", or else it will not import jQuery into your javascript file.

The first thing you type when coding with jQuery is always $. This just says "hey, this line of code is gonna be using jQuery, not regular plain old javascript". Then you use an identifier to select the element you want to change. For example...

$("#someId")

This selects the element with the id "someId". But we actually have to do stuff to it. jQuery has this awesome method called .animate(*style*, *time*, *easing*, *do-after*);. Style specifies what you want to change the element to. So, you might say {top: 20vh}.

vh stands for viewport height and vw stands for viewport width. They are super useful for making responsive webpages. 100vh are always in the height of the webpage and 100vw are always in its width, no matter the dimensions/resolution of the screen. Super useful!

The next three parameters are optional. The time parameter specifies how long you want the animation to take. The default it 400ms.

The easing parameter specifies when the animation should go faster at slower. For example, default is "swing", which means that it will go slower at the beginning and end and faster in the middle. It could also be set to something like "linear", which means the animation speed stays constant the entire time.

Lastly, the do-after parameter allows you to specify a function that gets executed after the animation.

Let's create an example. Say you wanted to make a <div> with an id of a-div move from the top left corner to halfway across the screen horizontally. Let's say you want it to take 700 milliseconds and you want it to happen in a constant speed, and you don't want any function to be executed after. We would write the following code in javascript/jQuery...

$("#a-div").animate({left: "50vh"}, 700, "linear");

...and there you go! Quick recap:

  • Import jQuery and use .animate() to make life a whole lot easier
  • vw and vh are units that are relative to the size of the window, so they are super useful for what you want to do.

Hope this helps and happy coding! :)

Upvotes: 1

Related Questions