Search code examples
javascripthtmlcssnavbarreact-bootstrap

css/javascript - how to make centered image on landing page transition to Navbar logo on scrolling

This is a simple navbar without javascript or custom CSS.

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="logo.jpg" alt="LOGO">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  </div>
</nav>

I would like to make a navbar brand as a logo image which would be at the center of the page when not scrolling down but when the user scrolls the logo image at the center transitions and reach to the left side and become a navbar brand.

I don't know how to animate and make this look seamless.

Here are images for reference: Image for Not Scrolled down and Scrolled down Not Scrolled

Scrolled Down

Solution

  • 1.Giving the navbar a second class of scroll & defining css for when it has Scroll Class.

    2.Adding transition in the default CSS.

    3.Adding Event Listener on the window gives us ScrollY every time we scroll.

    4.Adding if(condition) to check the scrolly position. all I am saying is if the ScrollY is Less Then 20.then add the class otherwise remove.

    let navBar = document.querySelector(".navbar");
window.addEventListener("scroll", (event) => {
  let scroll = this.scrollY;
  if (scroll < 20) {
    navBar.classList.add("scroll");
  } else {
    navBar.classList.remove("scroll");
  }
});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: gainsboro;
  height: 200vh;
}

.navbar {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 60px;
  padding: 20px;
  background-color: white;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.397);
  transition: all 0.5s ease-in-out;
}

.logo {
  height: 60px;
  transition: all 0.25s ease-in-out;
}

.navbar.scroll .logo {
  height: 500px;
}

.navbar.scroll {
  height: 100vh;
  width: 100vw;
  justify-content: center;
  overflow: hidden;
}

.navbar.scroll .navbar-toggler {
  display: none;
}
    <body>
  <nav class="navbar scroll navbar-expand-md navbar-light bg-faded">
    <a class="navbar-brand" href="#">
      <img class="logo" src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/coffee-logo-design-template-938fdd0de81fdd844a5154e66b42a914_screen.jpg?ts=1625004947" alt="LOGO" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-menu-2" width="40" height="40" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <line x1="4" y1="6" x2="20" y2="6" />
                <line x1="4" y1="12" x2="20" y2="12" />
                <line x1="4" y1="18" x2="20" y2="18" />
            </svg>
        </button>
    <!-- <div class="collapse navbar-collapse" id="navbarNav"></div> -->
  </nav>
  <script src="src/index.js"></script>
</body>