How can I disable(not hide) the scrolling vertical bar on scrolling with paralax effect

Question

I want to try the same effect of this site but am getting lost in action on how to implement this animation.

When the user starts scrolling, the images in the header zoom in, the scrolling tab(vertical) does not move, up to a point which another image shows up, and only afterward the scroll bar starts working.

How can I achieve this animation when scrolling?

At the moment, what I thought was: to get the pixel value of the DOM when am scrolling, as well as the height of the div I want to target. While the value of the DOM is less than the height of the box, the scale value should change based on the scrolling value.

The JS looks like this:

<script>
    $(window).scroll(function() {
        var initial_scroll = $('html').scrollTop();
        var firstbox_height = $('#firstbox').height(); 
       // console.log(firstbox_height);

        while(initial_scroll < firstbox_height){
            var sum = firstbox_height + ((firstbox_height * 0.01) / 100);

            $('img').css({

               // "transform": "scale(" + sum + ")"

            });                
        }        

    });
</script>

I seem to be going into an infinite loop.

My pen is here

My first thought would be not to disable anything but to catch the scroll event, make the event zoom instead of scroll until image is zoomed completely, and after that let the event scroll again. Just a thought, could be wrong. — Sami, Mar 14 '19 at 09:38
@Sami it's a matter of testing :) . However, am trying to console.log the value of #first_box as you can see in my code, but when I inspect the console I dont see anything but a zero. — Sidney Sousa, Mar 14 '19 at 10:20
See if this answer helps you get started: https://stackoverflow.com/a/3656618/3279876 — Sami, Mar 14 '19 at 10:37
Have checked that before @Sami. I opened the link of the answer and dont see anything working — Sidney Sousa, Mar 14 '19 at 10:45
Check this fiddle I made: https://jsfiddle.net/codesam/nedj3ubx/9/ — Sami, Mar 14 '19 at 11:22
@Sami I just edited my question. But I also tested your pen, but it does not seem to do the work. That because the text only gets smaller and smaller but never back to bigger as I scroll up. — Sidney Sousa, Mar 14 '19 at 12:21
Yeah, like I said, it was a simple example to help you get started. I was in a bit of a rush.. I'll see if I have time for a little more — Sami, Mar 14 '19 at 12:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190016/discussion-between-desousa-and-sami). — Sidney Sousa, Mar 14 '19 at 12:28

Sami · Answer 1 · 2019-03-14T15:03:58.307

Here's a working sample. It's not flawless, it bugs when you scroll just a little back and forth at the top, the text size might change in the wrong direction. Also it doesn't work when scrolling with arrow keys. But what it does is that it should give you the idea on how to proceed.
There's probably a cleaner, nicer and more concise way to do this, but this is one way.
To get a perfectly working one, I think you might have to place a transparent <div> over the one that changes, just to keep track of the position and hence the direction.

Fiddle here: https://jsfiddle.net/codesam/nedj3ubx/53/

HTML:

<body>
  <div id="box">
    Text
  </div>
  <p id="direction">
  </p>
</body>

CSS:

body {
  height: 200vh;
}

#box {
  width: 100%;
  height: 50vh;
  background-color: black;
  color: white;
  font-size: 72px;
}

jQuery:

$(document).ready(function(){
    var initialScroll = -1;
    var size;
    $(window).on('scroll touchmove mousewheel', function(e){
        var currentScroll = $(window).scrollTop();
        if (currentScroll > initialScroll) {
            $("#direction").text("down");
            size = parseInt($("#box").css("font-size"));
            if (size > 10) {
                $("#box").css("font-size", "-=2");
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }
        else if (currentScroll < initialScroll) {
            $("#direction").text("up");
        }
        else if (currentScroll == 0 && initialScroll == 0) {
            size = parseInt($("#box").css("font-size"));
            if (size < 72) {
                $("#box").css("font-size", "+=2");
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }
        initialScroll = currentScroll;
    });
});

How can I disable(not hide) the scrolling vertical bar on scrolling with paralax effect

1 Answers1