小编POP*_*POP的帖子

我想做的事

*滚动
时的图像查看右边的移动句子。

这样，我希望<p>每次滚动时都突出显示该元素。
也就是说，通常为opacity: 0.3;，并且在滚动时opacity: 1;从上到下依次切换。

我以为可以使用swiper.js做到这一点。

我现在就这样。请也看右边的那个。
如果此滑块环绕达到每个高度<p>并使用停止滚动preventDefault ()，则我认为实现会如预期的那样。

我尝试了什么

jQuery（未完成，这不起作用）

$(function() {
  $(".mai").scroll(function() {
    onScroll();
  });
  onScroll();
});

function onScroll() {
  $(".main-p p").each(function(i) {
    $(".main-p p").eq(i).removeClass("hl");    // mean highlight

  var scrPos = $(".main-p p:nth-last-child(2)");
  // I want to be second from the bottom of the "visible range" of .mai, not of <p>

  if(scrPos < active) {
    // If hl (= active) is above …

我想做的事

这样，最初是切换滚动。
当前（活动）元素到达中心时，下一个元素也希望能够在中心滚动。

当它看到底部的元素时，滚动将停止并变为切换滚动。

当前状态

我已经有一个滚动开关和一个代码来获取中心。
演示-JSFiddle

现在这不起作用，但是我编写了以下代码：

// Get the center of the height of .main
const rect = document.getElementsByClassName("main")[0].getBoundingClientRect();
const mainHCenter = rect.top + (rect.height / 2);
const mainWCenter = rect.left + (rect.width / 2);

// Get the element at the center of the height of .main
const centerElm = document.elementFromPoint(mainWCenter, mainHCenter);

if ($("p.active") === centerElm) {
      $(".mai").scroll().css('top',mainHCenter + 'px');
} else {
  $(".mai").scroll(function(e) {
    e.preventDefault();
  });
}

问：我应该怎么做才能做gif？

先感谢您。

码

// Get the center of the height …

我想做的事

我试图使句子类似于if语句：

[比较3个元素的高度]
？当所有内容均小于内容高度时：

• 延伸到内容的全部高度。
  （justify-content: space-between;或margin: auto;）

？当它大于内容高度时：
?? 在3个元素中，.middle当最大时：

• 将其他2个元素（.left和.right）拉伸到整个内容高度。

?? 除此之外：

• 比较.middle（.left和.right）以外的2个元素的高度，并将所有（3个元素）的高度调整为较大的一个。

顺便说一句，为什么我要用JS而不是CSS来实现：

我已经使用了flexbox。
但是我使用swiper，有什么问题吗？更改浏览器的宽度/高度时，上一张幻灯片的元素跳到下一张幻灯片。它无法获得正确的高度。
因此，我认为有必要使用JS来“指定”幻灯片高度并将其读入滑动器。

我当前的代码

FullscreenFiddle / JSFiddle

jQuery的

function maxHeight() {
  var maxH = 0;
  var contentH = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= contentH) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({ …

我想做无限的波纹动画,但它会变得不自然..

我不喜欢这种突然的变化,我想让动画永远持续下去.我该怎么做？

在代码片段中,由于某种原因我无法很好地显示它,因此当前情况在JSFiddle中.

body {font-size: 62.5%; background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 10rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2),
                0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 5rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 4rem rgba(255,255,255, 0.2),
                0 0 0 8rem rgba(255,255,255, 0);
  }
}

<div class="ripple" …