CSS анимация, соответствующая позиции прокрутки страницы - PullRequest
Новая
       11

CSS анимация, соответствующая позиции прокрутки страницы

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

Как сделать анимацию соответствующей позиции прокрутки страницы, чтобы при прокрутке пользователя мимо нее анимация переместилась в позицию A, а когда позиция прокрутки страницы над ней переместилась в позицию B?

Вот макет того, что я хотел бы сделать:

image

(точка поворота на 3 страницах представлена ​​синей точкой под ними.)

Я нашел различные примеры анимаций, которые запускаются один раз при прокрутке страницы (, например, AOS или ScrollTrigger ), или могут быть повторно активированы несколько раз,но я не нашел примеров, когда ход анимации связан с позицией прокрутки страницы.

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

Есть идеи, как этого достичь?Благодаря.

1 Ответ

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

Это довольно легко, если вы используете jquery с CSS3 для достижения этой цели.Вы можете повернуть страницу и вычислить значение поворота на основе позиции прокрутки.

Я сделал пример ниже.Пожалуйста, посмотрите фрагмент ниже: 

$(document).ready(function(){
	$(document).scroll(function(){
  	var scollHeight = $(document).height(); 
    var maxRotate = 30;
    var rotateVal =  5 + (($(document).scrollTop()* maxRotate) / scollHeight);
    
    $("#page1").css("transform", "rotate("+(-rotateVal)+"deg)");
    $("#page3").css("transform", "rotate("+(rotateVal)+"deg)");
  });
});
body{
  background-color: rgb(252,252,230);
}
.page-container{
  position: fixed;
}
.page{
  background-color:white;
  border:2px solid lightgray;
  width:85px;
  height:120px;
  position:absolute;
  top:20px;
  left:40px;
  transform-origin:bottom center -30px;
  transition-duration: 0.3s;
}

#page1{
  transform: rotate(-5deg);
}
#page3{
  transform: rotate(5deg);
}
.data-container{
  position: absolute;
  right:30px;
}
.data{
  background-image: url("https://i.stack.imgur.com/HwX2l.png");
  width:370px;
  height:283px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  <div class="page-container">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
  </div>
  <div class="data-container">
    <div class="data" id="data1"></div>
    <div class="data" id="data2"></div>
    <div class="data" id="data3"></div>
  </div>
</div>

Вы также можете проверить это здесь

...