Как изменить размер блока при скролле страницы?

Question

Как сделать так, чтобы квадрат увеличивался до определенных пор (например, до половины body)? Сейчас он разрастается бесконечно.

Нужно ограничить "рост" блока по вертикали.

window.addEventListener('scroll', function() {
    let value = window.scrollY
    let box = document.querySelector('.box')
    let num = (0 + value * .5).toFixed(2)
    box.style.transform = `scale(${num})`
    box.style.opacity = `1`
})

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
 }
 
.wrapper {
  width: 100%;
  height: 2000px;
 }

.box {
  width: 20px;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  left: 0;
 }

<body>
  <div class="wrapper">
    <div class="box"></div> 
  </div>
</body>

Answer 1

Чтобы притянуть ближе к моей ситуации: мне нужно, чтобы блок перестал расти по вертикали при появлении на экране следующего блока.

Я бы советовал для подобных анимаций использовать библиотеку GSAP, а чтобы завязать анимацию на скролл, ещё и библиотеку ScrollTrigger.

var tl = gsap.timeline({
    paused: true,
    scrollTrigger: {
      trigger: '#one',
      start: 'top top',
      end: 'bottom top',
      markers: true,
      scrub: true,
      pin: true
    }
  })
  .to('.resize', {left: 0, top: 0, width: '100%', height: '100%'})

body {margin: 0;}

section {
  height: 100vh;
}

#one {
  background-color: #999;
  position: relative;
}

#two {
  background-color: #ccc;
}

.resize {
  display: block;
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left: 10px;
  top: 10px;
}

.helper {
  font-size: 12px;
  position: absolute;
  color: #ffff;
}

.helper.-tl {top: 0; left: 0;}
.helper.-tr {top: 0; right: 0;}
.helper.-bl {bottom: 0; left: 0;}
.helper.-br {bottom: 0; right: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

<section id="one">
  <div class="resize">
    <div class="helper -tl">top-left</div>
    <div class="helper -tr">top-right</div>
    <div class="helper -bl">bottom-left</div>
    <div class="helper -br">bottom-right</div>
  </div>
</section>
<section id="two">Section</section>

БЛОГ НА HUSL

Как изменить размер блока при скролле страницы?

Ответы (1 шт):