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

This is a simple navbar without javascript or custom CSS.

<nav >
  <a  href="#">
    <img src="logo.jpg" alt="LOGO">
  </a>
  <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>
  <div  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

CodePudding user response：

To put a logo in the center of the page you could center it with this code, and for the topnav use the thing below the image tag:

<img src="example.jpg" alt="image" >

<div >
  <a  href="/">Home</a>
  <a href="/about">About</a>
  <a href="/pages">Pages</a>
  <a href="/contact">Contact</a>
</div>

<style>
html, body {
  width: 100%;
  height: 100%;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.topnav {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.active {
  background-color: #04AA6D;
  color: white;
}
</style>

Or you could always use svg's that are inline elements and are easier to put inside of the topnav

CodePudding user response：

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 >
    <a  href="#">
      <img  src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/coffee-logo-design-template-938fdd0de81fdd844a5154e66b42a914_screen.jpg?ts=1625004947" alt="LOGO" />
    </a>
    <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <svg  xmlns="http://www.w3.org/2000/svg"
                 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  id="navbarNav"></div> -->
  </nav>
  <script src="src/index.js"></script>
</body>