Прокрутка содержимого эффект движения - PullRequest
Новая
       7

Прокрутка содержимого эффект движения

0 голосов
/ 22 января 2020

Кто-нибудь может мне помочь с этим эффектом движения контента? Не могу понять, как изменить переводY, зависит от скорости прокрутки с небольшой задержкой.

Также, когда я использую переводY, он просто остается на своей позиции и перемещается с помощью прокрутки, а затем анимирует.

Вот так это должно выглядеть 

window.addEventListener('scroll', function (event) {

  animate({
    duration: 1000,
    timing (timeFraction) {
      return Math.pow(timeFraction, 2)
    },
    draw (progress) {
      let offset = progress * 100

      if (offset > 50) {
        offset = 100 - offset
      }

      $('.scroll-animate__item').css({ transform: 'translateY(' + offset + 'px)', transition: '0.5s all ease' })
    }
  })
}, false)

function animate ({ timing, draw, duration }) {
  const start = performance.now()

  requestAnimationFrame(function animate (time) {

    let timeFraction = (time - start) / duration
    if (timeFraction > 1) timeFraction = 1

    const progress = timing(timeFraction)

    draw(progress)

    if (timeFraction < 1) {
      requestAnimationFrame(animate)
    }
  })
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

    <div class="container-fluid">
        <div class="row align-items-center justify-content-center" style="height: 1000px;">
            <div class="card bounce" style="width: 18rem; border: none;">
                <div class="card-body">
                    <h5 class="card-title item-up animate-item scroll-animate__item" data-offset-up="50" data-offset-down="0">Card title</h5>
                    <div class="item-down animate-item scroll-animate__item" data-offset-down="50" data-offset-up="0">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
...