如何通过滚动实现CSS过渡效果的动画？

Question

我有一个元素想要“扩展”，并更改页面背景颜色。随着用户滚动，中心的圆点将扩大以填充页面，并显示新的背景颜色。我看到了如何更改背景颜色的示例，但没有看到如何“扩展”它的示例。我已经附上了一个CSS动画效果的jsfiddle。此示例显示了它的外观，但仅在鼠标悬停时有效。如果您滚动示例并将鼠标悬停在白点上，可以看到其应该是什么样子的。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%;
}

- o_O

Answer 1

如果您希望动画直接与用户在页面上滚动的百分比相关联，则需要使用JavaScript。首先，获取滚动百分比。这里有一个很好的答案告诉你如何做：https://dev59.com/9nE95IYBdhLWcg3wQ7qc#8028584。最初的回答。

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

接下来，您可以定义一个动画函数，该函数接受用户滚动的百分比，并将圆圈的样式设置为起始动画时CSS值和结束动画时CSS值之间的百分比。

Original Answer翻译成"最初的回答"

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

- Toby Mellor

Answer 2

这是我在这里和那里犯罪的不同想法的混合体... 带有一小部分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>

- Mister Jojo

---

这很接近了。我会试着调整一下，但是我想让用户看到展开，所以它不应该在用户看到点之前开始。感谢您的回答。 - o_O

非常漂亮的CSS样式。我立即将其集成到我的Sass代码中。非常感谢。 - user11484628