Transition on scroll. So cool!

Am trying to clone this[https://imdev.in/] portfolio website for practice. And I saw these cool transitions that are triggered on scrolling, from what I understand. Like when you scroll through, the navbar, previously transparent, becomes dark. I’d love to learn how to do that, so any input is much appreciated. Thank you.

Not entirely sure what you are looking for. However, doing searches on codepen may help you find a starting point. Good luck.

If you visit that link, you’ll see that the navbar is transparent but when you scroll through a section, it changes to dark. Which is probably a transition which is triggered on scrolling, or being on a certain section of the page.
So what am looking for is?
If we can check what section of our page is currently on screen, and how to do that?
And how to trigger transition based on which section of the page we’re on?
I hope this is understandable.

You’ll need to look at their cs code, or perhaps their js. Animations usually start in the css.

I believe this specific site is using wordpress
(see this sample theme that could have been used:
http://demos.themetrust.com/weston/features/ )

You’ll have to find your own way to implement it since you aren’t using wordpress.

one more tip. read this:
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

I bet this is the same principle in use with the effect you want…

If we can check what section of our page is currently on screen, and how to do that?
And how to trigger transition based on which section of the page we’re on?

Well, you can use .getBoundingClientRect() on any element to get info about its position relative to the viewport. The bounding client rect has 8 properties: x, y, width, height, top, right, bottom, left.

So if you wanted to check if a certain element has hit the top of the viewport, you could check this condition: myElement.getBoundingClientRect().top < 0.

That’s only one piece of the puzzle though. The overall process would be this:
#1 listen for scroll events,
#2 on each scroll event, check whether your target element is in the position that you’re interested in
#3 if so, apply whatever transition or animation you want

.getBoundingClientRect() will help you do #2. Do you also understand how to do #1 and #3?

Firstly, I apologise for responding this late. College has been hectic.
I’ll be sure to look into this. Thanks a lot, you. :smiley:

The demo was exactly what I was looking for. So thankful!

Thank you!
Am doing this.

window.onscroll = function() {myFunction()};

function myFunction() {
    let el = document.getElementById('navbar');
    let newEl = document.getElementById('test');
    if (document.documentElement.scrollTop > newEl.offsetHeight/2) {
        el.style.background = '#000';
    } else {
        el.style.background = 'none';
    }
}

checking how much the whole doc has been scrolled with scrollTop
then comparing it with how much the top section of my page has been scrolled with .offsetHeight.
Is there a better way to do this?

1 Like

This is a good start, but I don’t think it’s complete yet. A few notes:

  1. I don’t think you understand offsetHeight. In your comment you say that you are using it to see “how much the top section of my page has been scrolled.” But that’s not what offsetHeight does. According to MDN, “the HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.” So right now what your code is doing is changing the background of the navbar once your page has been scrolled a distance that is greater than half the height of your test element. I don’t believe that’s what you’re aiming for. (Correct me if I’m wrong please!).

  2. Perhaps you want to use .offsetTop? That property gives you the distance between the element and its nearest relatively positioned parent. I take it the element you’re interested in is an immediate descendant of <body>? If so then checking that element’s .offsetTop with the documentElement.scrollTop would tell you when that element has hit the top of the viewport.

  3. But perhaps something easier would work as well. If you just want to fade in the navbar background after the page has been scrolled a decent distance (say 150px), then there’s no need for you to check anything other than scrollTop:

if (document.documentElement.scrollTop > 150) { 
  // apply desired styles to navbar
}

It depends on exactly when you’re wanting the effect to take place.

  1. Last, a more general point about attaching listeners: Rather than doing window.onscroll = myFunction, I’d recommend window.addEventListener('scroll', myFunction); When you assign a function to .onscroll, that is the only function that will execute after a scroll event. In contrast, wWith .addEventListener, you can add as many handlers as you want. The standard way to add a listener to an element (or to the window) is with .addEventListener.