Как анимировать эффект CSS-перехода с помощью прокрутки? - PullRequest
Новая
       20

Как анимировать эффект CSS-перехода с помощью прокрутки?

2 голосов
/ 30 июня 2019

У меня есть элемент, который я хочу «развернуть» и изменить цвет фона для фона страницы. Когда пользователь прокручивает, точка в центре будет расширяться, чтобы заполнить страницу новым цветом фона. Я вижу примеры того, как изменить фон, а не как его «развернуть». Я прикрепил jsfiddle к нужному эффекту анимации CSS. Этот пример показывает, как он будет выглядеть, но работает только при наведении курсора. Вы можете увидеть, как это должно выглядеть, если прокрутить пример и навести на него белую точку. 1

Желательно, чтобы я выполнил это с помощью анимации CSS, но я не против попробовать это с помощью JavaScript. Я возился с этим здесь.

Во-вторых, я использовал поддельный элемент, чтобы получить пример, но есть ли способ, которым я могу сделать этот эффект, не нуждаясь в элементе и просто используя цвет фона контейнера?

Вот HTML-код примера эффекта, которого я пытаюсь достичь. 

<div class="container">
        <span class="white"></span>
</div>

А вот и CSS: 

.container {height:500px;width:100%;background:#ed565d;position:relative;}
.container span {display:block;}
.white {background:#ffffff;height:10px;width:10px;margin:auto;border-radius:100%;position:absolute;top:50%;left:50%;}
.container:hover .white {
    width:300%;
    height:300%;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out;
    top:-100%;
    left:-100%;
}

Ответы [ 2 ]

2 голосов
/ 30 июня 2019

Если вы хотите, чтобы анимация соответствовала проценту, который пользователь прокручивал на странице, потребуется JavaScript.

Сначала получите процент прокрутки.Вот отличный ответ о том, как это сделать: https://stackoverflow.com/a/8028584/2957677

const scrollTop = $(window).scrollTop();
const documentHeight = $(document).height();
const windowHeight = $(window).height();
const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;

Затем вы можете определить функцию анимации, которая принимает процент прокручиваемого пользователем, и установит стиль на круге какПроцент между значениями CSS в начале анимации и значениями CSS в конце анимации. 

function growAnimation($element, animationPercentage) {
  const animationDecimal = animationPercentage / 100;

  // Your existing .grow CSS values
  const startPositionPercent = 50; // top/left at start of animation
  const finishSizePercent = 300; // width/height at end of animation
  const finishPositionPercent = -100; // top/left at end of animation

  // The current CSS values, based on how far the user has scrolled
  const currentSizePercent = getProgressFromTo(0, finishSizePercent, animationDecimal);
  const currentPositionPercent = getProgressFromTo(startPositionPercent, finishPositionPercent, animationDecimal);


  $element.css({
    width: `${currentSizePercent}%`,
    height: `${currentSizePercent}%`,
    top: `${currentPositionPercent}%`,
    left: `${currentPositionPercent}%`
  });
}

// A util function to get the progress between two values
// e.g. 50% between 0 and 10 is 5
function getProgressFromTo(from, to, animationDecimal) {
  return from + (to - from) * animationDecimal;
}

Вот скрипка: https://jsfiddle.net/owazk8y1

Кривые анимации

Вы можете просматривать кривые анимации, чтобы анимация выглядела намного плавнее.Объемный animationDecimal в функции кривой Безье.Вот несколько примеров функций: https://gist.github.com/gre/1650294 https://jsfiddle.net/owazk8y1/1

0 голосов
/ 30 июня 2019

Это смесь разных идей, которые я согрешил тут и там ... с небольшой частью JS, которая будет пилотироваться в CSS

PS: команда перехода должна быть установлена ​​для элемента 

const storeScroll=()=>{
  document.documentElement.dataset.scroll = window.scrollY;
}

window.onscroll=e=>{  // called when the window is scrolled.  
  storeScroll()
}

storeScroll()   // first attempt
.container {
  position   : relative;
  height     : 500px;
  width      : 100%;
  background : #ed565d;
  overflow   : hidden;  /* added */
}
.white {
  display       : block;
  position      : absolute;
  background    : #fff;
  height        : 10px;
  width         : 10px;
  margin        : auto;
  border-radius : 100%;
  top           : 50%;
  left          : 50%;
  -moz-transition    : all 0.5s ease-out;
  -o-transition      : all 0.5s ease-out;
  -webkit-transition : all 0.5s ease-out;
  transition         : all 0.5s ease-out;
}
html:not([data-scroll='0']) .white {
  width              : 300%;
  height             : 300%;
  top                : -100%;
  left               : -100%;
}
<div class="container">
  <span class="white"></span>
</div>
...