Scroll down transformation and logo movement

Question

What would be the best way to achieve the following:

I would like to get a big centered logo, to shrink and move to the top left of the page as you scroll down and become part of the nav bar. I would also like a nav bar to fade down from the top.(I only know how to do this timed not dependent on scroll)

When the site loads it will look like just a logo with a simple background. When you scroll down the logo will shift to the top left and the nav bar will ease in and the background picture will also move up out of sight.

Is there any way that you can do the transformation dependent on how far you have scrolled. So that if you stop half way your transformation will also stop?

Answer 1

If I understand you correctly, you want to make a transition to the nav bar / header and the logo dependent on how much you have scrolled, while you are scrolling? If so, it is not as hard is it might sound.

First we have to find out, how many pixels you have scrolled on the page and how many pixels to scroll before the transition is complete. Se code example below.

$(window).on("scroll", function() {
  var yPos = $(this).scrollTop(),
      yPer = (yPos / 120);

      if (yPer > 1) {
         yPer = 1;
      }
});

Here the y position of the page is found yPos and the transition is set to complete when scrolled down 120 pixels. With these informations we can then calculate the percentage of scrolled pixels until reaching 120 pixels; yPer.

0px = 0%, 60px = 50%, 120px = 100%

In the if-statement we make sure, that the percentage cannot exceed 100%.

---

HTML and CSS part

Before we go any further with the JavaScript part, let’s setup the HTML and CSS.

HTML structure:

<header></header>
<img class="logo" src="http://oi68.tinypic.com/2z5m4pu.jpg" />

In this case the logo is not inside the header, since we are going to hide the header by default, which would also hide all the child-elements including the logo, which we do not want.

Hiding the header/nav bar:

header {
  width: 100%;
  height: 60px;
  background: #FFF;
  position: fixed;
  top: -60px;
  opacity: 0;
}

Since you want the header to fade in from the top while scrolling, top is set to the negative height of the header itself and the opacity to 0.

Centering the logo:

img.logo {
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

In this way we are going to center the logo in the middle of the screen, no matter the size and resolution of the browser window. If the values in top, left and translate3d all where set to 0, the logo would be in the top left corner. That's why this is a good way to do it in our situration.

---

JavaScript part - continued

Now we're ready the continue with the JavaScript part.

Store heights in variables:

var header = $("header"),
    headerHeight = header.height(),
    logo = $(".logo"),
    logoHeight = logo.height();

    $(window).on("scroll", function() {
       // Rest of our code
    });

To make it a lot easier for us self later on, we are going to automatically find the height of both the header and the logo, and store those in variables. By doing this we don’t have to change anything in the JavaScript code, if we later on in the future wants to change the height of our elements. We only have to change it, in the CSS.

We are going to set those variables before our scroll-function since, they do not change while scrolling as seen above.

The Calculations:

var logoPos = ( -1*(yPer * 50) + 50),
    logoSize = ((headerHeight * yPer) - (logoHeight * yPer) + logoHeight),
    headerPos = ((yPer * headerHeight) - headerHeight);

This is a very important part of our code. These expressions are the once that calculates how the elements should animate as we scroll.

logoPos: Calculating the new position of the logo as we scroll. We know that the top, left and translate3d always has a value of "50". | Starts on 50, ends on 0.

logoSize: Calculating the size of the logo as we scroll. | Starts on the height of the logo, ends on the height of the header.

headerPos: Calculating the position of the header as we scroll. | Starts on the negative height of header, ends on 0.

NOTE: If we didn’t stored the heights of your elements like before, we had to manually change them in calculations if we later wanted to change them.

Add the new styles:

logo.css({
  top: logoPos + "%",
  left: logoPos + "%",
  transform: "translate3d(-" + logoPos + "%,-" + logoPos + "%,0)",
  height: logoSize
});

header.css({
  top: headerPos,
  opacity: yPer
});

Here we using all our calculations to style our elements as we scroll. On the logo at translate3d we have to remember to put a minus before the logoPos. Else the logo will start moving from the bottom right instead of the center.

For the opacity, we don't have to calculate anything. We just use the yPer.

---

Well that’s basically it. Hope this could help you out.

You can se the full code in context and with comments in this fiddle:

Working Fiddle

Answer 2

If I understand your question correctly then you should use $(window).scrollTop().

For example in your javascript file,

$(document).ready(
  function () {
      setInterval(function () {
          if ($(window).scrollTop() >= 650) {
         // Move your logo to where you want 
         }
         else{
         //Move the logo back to the original position 
         }
      }, 1000);
  });

This code will check if the current top of your scroll is past 650px and will trigger that code. If it's less than 650px they it will trigger the other code to move your picture back. The setInterval is used so it will constantly check every 1 second but you can change that to suit your needs.

Change the 650 to whatever you think fits best.

It kind of hard to figure out your problem without providing any code but I hope this helps.