html/css - techniques for transitioning a centered image on a landing page into a navbar logo when scrolling

Question

html/css - techniques for transitioning a centered image on a landing page into a navbar logo when scrolling

Creating a minimalist navbar without the use of JavaScript or custom CSS is easier than you think.

<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>

If you want to create a navbar with a logo image that transitions from center to left upon scrolling, it can be done seamlessly - even if you're not an animation expert.

To achieve this effect, consider these reference images for the initial and scrolled down states: Image for Not Scrolled down: https://i.sstatic.net/PkAli.png

Scrolled down Image: https://i.sstatic.net/LkPgx.png

javascript html css navbar react-bootstrap

Answer 1

Answer №1

1. Modifying the navbar by adding a second class called scroll and defining CSS styles for when it has the Scroll Class.

2. Implementing a transition effect in the default CSS.

3. Setting up an Event Listener on the window to retrieve the ScrollY value every time we scroll.

4. Including an if(condition) statement to check the scroll position. Essentially, if the ScrollY is less than 20, then add the class; otherwise, remove it.

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>

Answer 2

1. Modifying the navbar by adding a second class called scroll and defining CSS styles for when it has the Scroll Class.

2. Implementing a transition effect in the default CSS.

3. Setting up an Event Listener on the window to retrieve the ScrollY value every time we scroll.

4. Including an if(condition) statement to check the scroll position. Essentially, if the ScrollY is less than 20, then add the class; otherwise, remove it.

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>

Answer 3

Answer №2

If you want to center a logo on your page, you can achieve this using the following code snippet. Additionally, for the top navigation bar, consider using the sample structure provided below:

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

<div class="topnav">
  <a class="active" 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>

Another approach is to utilize inline SVG elements which are easier to insert within the top navigation bar.

Answer 4

If you want to center a logo on your page, you can achieve this using the following code snippet. Additionally, for the top navigation bar, consider using the sample structure provided below:

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

<div class="topnav">
  <a class="active" 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>

Another approach is to utilize inline SVG elements which are easier to insert within the top navigation bar.

html/css - techniques for transitioning a centered image on a landing page into a navbar logo when scrolling

Answer №1

Answer №2

Similar questions

Expanding the number of tags in wp_nav_menu_container_allowedtags for WordPress

Troubleshooting: Issues with AngularJS $route.reload() functionality

JavaScript JSON conversion from a list

Error message: "jQuery DataTables not working - table disappears when modal window opens

Incorporating a prop in keyframe animation with styled components

Adjust the size of an input field in jquery or javascript based on user input

Is it possible to nest a bootstrap "btn-toolbar" to create horizontal scrolling on smaller screens with Bootstrap 4?

form controls disappear upon adding form tags

Convert ViewBag into a JSON array in order to create a bar chart in a .NET MVC application

Arranging two spans to appear in a vertical column beside a thumbnail

My script for retrieving the playlist is experiencing difficulties in calling upon the "btoa" and "item.slice" methods

What happens in mongoose if one of several consecutive queries fails?

Utilizing MongoDB's object within the mapper function in MapReduce

Exploring the Sidebar Navigation Features of Bootstrap 4

Maximizing Efficiency: Implementing Loading Panels in AngularJS

In my attempt to position Font Awesome icons alongside a button icon and create equal spacing between them, I want to achieve the layout displayed in the example

How to retrieve properties of the final item in an array using Vue.js

Verify if the scroll bar is still being held by the user

The error message "TypeError: Unable to access property of undefined when using web sockets"

JavaScript is unable to modify the value of an input in HTML