[Increase size div to fullscreen with scroll down]

I have already explained what I want to do with Observer.

[Increase size div to fullscreen with scroll down]

How can I use Observer to get this?

[Increase size div to fullscreen with scroll down]

What I want to do is that when I scroll a div it gets smaller and when it finishes getting smaller, I move to the next slide.
Here I have almost achieved it https://barracuda.pixelarte.com/scroll/, but it doesn't work well to move to the next slide.

 

HTML

<div id="fullpage-scroll">
<div class="section active" id="block-1">
  <div class="scrollMe"></div>
  <div class="iWillExpand"></div>
</div>
<div class="section" style="background-color:red;"></div>
<div class="section" style="background-color:blue;"></div>
</div>


CSS

#block-1 .fp-tableCell {
    width: 100%;
    overflow-y: scroll;
    display: block;
  }
    
  .scrollMe {
    height: 300vh;
    width: 100%;
  }
  
  .iWillExpand {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: aqua;
    transform: scale(1);
    z-index: -1;
  }


Javascript

var myFullpage = new fullpage('#fullpage-scroll', {
    lazyLoad: true,
    normalScrollElements: '#block-1 .fp-tableCell'
});

var container = document.querySelector('#block-1 .fp-tableCell');
var containerHeight = container.scrollHeight;
var iWillExpand = document.querySelector('.iWillExpand');

container.onscroll = function (e) {
    iWillExpand.style.transform = 'scale(' + (1 - 0.5 * container.scrollTop / (containerHeight - 300)) + ')';
};

 

[Increase size div to fullscreen with scroll down]

Resize a element with scroll

[Increase size div to fullscreen with scroll down]

How can I implement this functionality with Observer?

[Increase size div to fullscreen with scroll down]

Hello,

Here is an example:
I would like to do something like this but that the pass between sections is like here: https://alvarotrigo.com/fullPage/examples/videoBackground.html

 

There are also two problems:
1. the video pauses when I scroll and when I go back to the top it doesn't start again.
2. when I scroll down and click somewhere, it suddenly goes up.

 

Thank you very much.

Best regards

[Increase size div to fullscreen with scroll down]

Hello,
Thank you for your input.
I wanted to know if it is possible to make the effect work without autoScrolling: false.
Thanks