How to make a zoom in function when the website opens

Issue

How can i make a code where if you open my webpage then this happens: https://www.youtube.com/watch?v=tGsKzZtRwxw using css?

But what i want instead is for the logo to first zoom in (faster, maybe 5 sec until the animation is over) to show the logo, then it goes to the top left where it stays there when you browse through my page. It is for a school project with the theme star wars.

Solution

You can do something like in below snippet (using animation) :

Use styles and decoration according to need , this is only a demo.

As known font-size is for text so this animation will work only for text . If you want animation for other stuffs than change accordingly like can use width height higher values or can use transform: scale() property

function zoom() {
  var reed = document.getElementById("demo");
  reed.classList.add("animation");
}
.animation {
  animation: zoomer 5s linear;
}

@keyframes zoomer {
  0% {
    font-size: 300px;
  }
  100% {
    font-size: 30px;
  }
}

.color {
  color: red;
  font-size:30px;
}
<body onload="zoom()">
  <h1 id="demo" class="color">content</h1>
</body>

Answered By – Rana

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published