CODEWITHSUNDEEP
htmlcssnavbar
D A
D A

Reputation: 3

CSS/HTML Shrink Navbar Logo slowly

I am currently using this code to shrink the navbar logo of my homepage https://ragnarokeurope.net/ . If you scroll down, you see it shrink super fast. Is there not a way to make it shrink smooth and slowly? like here for example https://www.novaragnarok.com/

    <script>
window.onscroll = function() {
  growShrinkLogo()
};

function growShrinkLogo() {
  var Logo = document.getElementById("Logo")
  if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
    Logo.style.width = '30px';
  } else {
    Logo.style.width = '60px';
  }
}
</script>

and this is my navbar CSS

.navbar-custom .navbar-brand.logo-image img {
    width: 193px;
    height: 75px;
    margin-bottom: 1px;
    -webkit-backface-visibility: hidden;
}

Upvotes: 0

Views: 129

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

Add the rule transition: 1s; y to the .navbar-custom .navbar-brand.logo-image img selector and you will get the desired result. I indicated one second - 1s. You can set any value that you need yourself.

.navbar-custom .navbar-brand.logo-image img {
    width: 193px;
    height: 75px;
    margin-bottom: 1px;
    -webkit-backface-visibility: hidden;

    transition: 1s; /*add this it*/
}

Upvotes: 1

Abdelrhman Gemi
Abdelrhman Gemi

Reputation: 171

you can use transition property css

#Logo {
  transition: width 1.5s;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Upvotes: 1

Related Questions