1

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.

3 Answers 3

1

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>

1

You can try the CSS zoom rule:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

Note: It just makes everything on the page bigger😃

0

I would suggest that when the page is fully loaded you set the logo style to have an animation which starts with transform with a scale from 1 to something and then moves to top 0 left 0 (or whatever is suitable).

Without seeing your actual code it is difficult to advise further but something like:

@keyframes logo {
  0% {
   top: 50%;
   left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
  50% {
   top: 50%;
   left: 50%;
    transform: scale(2) translate(-50%, -50%);
  } 
  100% {
  top: 0;
  left: 0;
  transform: scale(1) translate(0, 0);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.