Блог

Главная - Вопросы по программированию - Как обрабатывать событие прокрутки с анимацией в состоянии каждого момента?

Как обрабатывать событие прокрутки с анимацией в состоянии каждого момента?

#javascript #css #animation

#javascript #css #Анимация

Вопрос:

Я хочу сделать анимацию события прокрутки, вот шаги:

  1. Элемент card (div amp; img, давайте назовем его CARD) в середине экрана;
  2. Выполняйте прокрутку вниз;
  3. КАРТА будет вращаться и масштабироваться;
  4. Выполняйте прокрутку вверх;
  5. КАРТА будет вращаться и масштабироваться до состояния шага 1;

Итак, как правило, КАРТА будет вращаться и масштабироваться во время события прокрутки вверх / вниз, теперь вопрос в том, как разобраться с взаимосвязью между событием прокрутки и состоянием КАРТЫ в каждый момент? Прокрутка вверх / вниз будет выполнять «обратное подобное» состояние, скорость scoll также влияет на состояние карты.

PS: это демонстрационный анимационный сайт, на который я хочу подписаться.

Ответ №1:

Я попытался имитировать анимацию прокрутки ссылки, которую вы упомянули в своем вопросе

Ниже приведен вывод (это всего лишь его часть, и не смотрите на fps в формате GIF, его вывод намного плавнее) введите описание изображения здесь

Что я сделал, так это то, что я изменил свойство преобразования карты на основе некоторых значений scrollY .

Здесь я использовал определенные значения scrollY, такие как 1300,1750,2950 и т.д., Чтобы связать анимацию.

Теперь в случае, когда scrollY<=1300

я давал анимацию вращения, пока scrollY не достигнет 1300.

введите описание изображения здесь

Итак, конечная точка = 1300, начальная точка = 0.

Общее количество элементов между двумя = 1300-0 = 1300.

Предположим, я хочу, чтобы элемент вращался примерно на 174 градуса против часовой стрелки.(Как я сделал в коде). итак, когда scrollY = 1300, я хочу повернуть угол на -174 градусов. поэтому, когда scrollY=1 угол поворота будет равен (-174/1300), а для scrollY = 2 это будет 2 *(-174/1300) и так далее, таким образом, значение зависит от scrollY, поэтому общее выражение в этом случае будет = -((scrollY)*(174/1300)) .

и для свойства scale я хочу уменьшить его в 0,48 раза до обычного размера, когда scrollY достигнет 1300.

Начальное значение масштаба = 1 конечное значение масштаба = 0,48,

теперь, чтобы получить значение масштаба 0.48 при scrollY = 1300, я должен вычесть (1-0.48) => 0.52 (здесь 0.52 — дельта S) из 1

и когда scrollY = 1, я вычту (0,52 / 1300) из 1 Изменение значения масштаба зависит от значения scrollY

Таким образом, мы можем применить это выражение для достижения масштабной анимации 1-(((0.52)/1300)*(scrollY))

Теперь, когда дело доходит до случая, когда начальная точка не равна 0, мы сдвигаем ее на 0, вычитая начальную точку из scrollY

В случае 2 (scrollY лежит между 1300 и 1750)

введите описание изображения здесь

Общее количество элементов между двумя = 1750-1300 = 450.

Здесь я дал анимацию вращения по оси x

Начальное значение rotateX = 10 градусов, конечное значение rotateX = 70 градусов.

поэтому я хочу увеличить значение на 60 градусов, когда оно достигнет scrollY = 1750.Таким образом, дельта Rx = 60deg

Общая формула, когда начальное значение scrollY не равно 0(здесь в данном случае это 1300) (Initial rotation value (scrollY-Initial scrollY value)*(delta Rx/total number of elements))

или

(10 (scrollY-1300)*(60/450))deg

Таким образом, мы можем использовать выражения, подобные приведенным выше, для управления значением свойства transform (просто замените delta Rx на delta Ry , delta Rz, delta S и т. Д.), А также свойства top и left .

СМОТРИТЕ ЭТО В ПОЛНОЭКРАННОМ РЕЖИМЕ

 var card = document.getElementsByClassName('card')[0];
var parent = document.getElementsByClassName('parent')[0];
var end = document.getElementsByClassName('end')[0];

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

  var scrollY = window.scrollY;

  if (scrollY <= 1300) {
    card.style.marginTop = "0px";
    card.style.transform = " rotateY(-25deg)rotateX(10deg)rotateZ("   (-scrollY) * (174 / 1300)   "deg)scale("   (1 - ((0.52 / 1300) * scrollY))   ")"; //scale(0.48);rotateZ(174.4);   
    parent.style.top = "200px";
    parent.style.left = "1150px";
  }

  if (scrollY > 1300 amp;amp; scrollY <= 1750) {
    var top_init = 200;
    var left_init = 1150;
    var range = 1750 - 1300;

    parent.style.position = "fixed";
    parent.style.marginTop = "0px";

    card.style.transform = " rotateY(-25deg)rotateX("   (10   (scrollY - 1300) * (60 / range))   "deg)rotateZ(-174deg)scale(0.48)";

    parent.style.top = top_init   ((scrollY - 1300) * ((750 - 200) / range))   "px";
    parent.style.left = left_init - ((scrollY - 1300) * ((1405 - 1150) / range))   "px";

    if (scrollY == 1950) {
      card.style.transform = " rotateY(-25deg)rotateX(70deg)rotateZ(-174deg)scale(0.48)";
      parent.style.top = "750px";
      parent.style.left = "1405px";
    }

  }

  if (scrollY > 1750) {
    var end_point = 2950;
    range = end_point - 1750;

    parent.style.position = "fixed";
    parent.style.marginTop = "0px";
    parent.style.left = 895 - ((scrollY - 1750) * (120 / range))   "px";

    card.style.transform = "rotateY("   ((-25)   ((scrollY - 1750) * (25 / range)))   "deg)rotateX("   (70 - ((scrollY - 1750) * (70 / range)))   "deg)rotateZ("   ((-174)   ((scrollY - 1750) * (84 / range)))   "deg)"  
      "scale("   (0.48   ((scrollY - 1750) * (2.3 / range)))   ","   (0.48   ((scrollY - 1750) * (3.426 / range)))   ")";
    card.style.filter = "brightness("   (100 - ((scrollY - 1750) * (50 / range)))   "%)";


    if (scrollY > end_point) {
      card.style.transform = "rotateY(0deg)rotateX(0deg)rotateZ(90deg)scale(2.78,4.036)";
      card.style.filter = "brightness(50%)";
      parent.style.left = "775px";
      parent.style.position = "absolute";
      parent.style.marginTop = end_point   "px";
      end.style.opacity = "1";
    }
  }

  var opac = scrollY > end_point ? "1" : "0";
  end.style.opacity = opac;

}); 
 * {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
}

body {
  height: 4300px;
  overflow-x: hidden;
  width: 100%;
}

.parent {
  top: 200px;
  left: 1150px;
  position: fixed;
}

.card {
  top: 200px;
  left: 1150px;
  background-color: #6154C1;
  height: 500px;
  width: 350px;
  color: white;
  border-radius: 20px;
  transform-origin: 50%;
  transform-style: preserve-3d;
  transform: rotateY(-20deg)rotateX(10deg);
}

.content_1 {
  padding: 100px 100px;
  height: 100vh;
  width: 100%;
}

.content_1 h1 {
  font-size: 60px;
}

.content_1 p {
  margin-top: 25px;
  font-size: 22px;
  width: 60%;
}

.end {
  position: absolute;
  height: 100vh;
  width: 100%;
  transition: 0.4s;
  top: 505px;
  left: 0px;
  opacity: 0;
  margin-top: 2950px;
}

.end h1 {
  color: white;
  font-size: 250px;
  padding-top: 300px;
  letter-spacing: 8px;
  font-weight: normal;
  text-align: center;
} 
 <div class="parent">
  <div class="card">
    <div class="chip"></div>

  </div>

</div>
<div class="end">
  <h1>THE END</h1>
</div>
<div class="content_1">
  <h1>Heading</h1>

  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>

  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>
<div class="content_1">
  <h1>Heading</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>

Ответ №2:

Попробуйте это:

 const el = document.querySelector("#card");
let deg = 0;
let scale = 1;

document.onwheel = e => {
  deg  = event.deltaY * 0.09;
  scale *= 1   event.deltaY * -0.002;
  scale = Math.min(Math.max(.125, scale), 4);
  el.style.transform = `rotate(${deg}deg)`;
  el.style.transform  = `scale(${scale})`;
} 
 #card{
  height: 50px;
  width: 50px;
  background-color: #66CCFF;
} 
 <!DOCTYPE>
<html>
<head>

</head>
<body>
<div id = "card"></div>
</body>
</html>

Примечание: прокрутка внутри страницы stackoverflow также приведет к сдвигу страницы. Попробуйте это в jsfiddle для лучшего просмотра.

Комментарии:

1. Спасибо за ваш ответ! Кроме того, вы видели ссылку на демонстрацию выше, когда вы немного прокручиваете в конце, КАРТА падает сразу и плавно, не могли бы вы, пожалуйста, помочь мне заархивировать это, заранее спасибо!

2. @Kevin Zhang Это еще один вопрос. Я создал скрипку , чтобы продемонстрировать то, что вы просили.