0

Как сделать так, чтобы квадрат увеличивался до определенных пор (например, до половины 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>

4
  • 1
    Добавить условие?)
    – Nannik
    30 июл 2022 в 20:59
  • По горизонтали или вертикали?
    – ΝNL993
    31 июл 2022 в 6:39
  • Нужно ограничить по вертикали
    – wnsy
    31 июл 2022 в 6:43
  • Чтобы притянуть ближе к моей ситуации: мне нужно, чтобы блок перестал расти по вертикали при появлении на экране следующего блока.
    – wnsy
    31 июл 2022 в 6:48

1 ответ 1

0

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

Я бы советовал для подобных анимаций использовать библиотеку 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.