javascript - flex 中的 Marquee div

Question

我正在尝试创建一个无限的水平“滚动”，如选取框效果(例如 like this one)。

这是我的代码:

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
}

.container {
  height: 100%;
  display: flex;
  padding-left: 10%;
  border: 1px solid tomato;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}
.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}
.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}
.child4 {
  width: 21rem;
  height: 100%;
  background-color: #C8E7C1;
}

<div class="parent">
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
</div>

如您所见，它可以工作但并不完美。我希望一旦绿色矩形移动，蓝色(稍微间隔开)的矩形就会立即出现，我不希望出现一个完整的白色屏幕。

希望大家明白我的意思...

非常感谢!

Answer 1

您可以再添加一个具有相同子元素的容器元素，然后在父元素上使用 display: flex 和 overflow: hidden。您还可以使用 vw 单位和 flex 属性将 .container 元素的宽度设置为大于窗口宽度。

如果需要，请调整 container 的 width 和 padding 属性。

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
  display: flex;
  overflow: hidden;
}

.container {
  height: 100%;
  flex: 0 0 120vw;
  display: flex;
  padding-right: 10%;
  border: 1px solid tomato;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}

.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}

.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}

.child4 {
  width: 21rem;
  height: 100%;
  background-color: #C8E7C1;
}

<div class="parent">
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>

  <div class="container other">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
</div>

另一种解决方案是在 container 上添加 padding-right 宽度 vw 单位。

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
  display: flex;
  overflow: hidden;
}

.container {
  height: 100%;
  display: flex;
  padding-right: 50vw;
  border: 1px solid tomato;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}

.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}

.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}

.child4 {
  width: 21rem;
  height: 100%;
  background-color: #C8E7C1;
}

<div class="parent">
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>

  <div class="container other">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
</div>

Javascript/jQuery 解决方案，您可以先创建原始元素的克隆并将其附加到父元素。创建一个函数，该函数将使用 setInterval 函数减少元素的左侧位置。如果偏移量小于同一元素的 -width，则表示该元素不在屏幕上。在这种情况下，您应该将元素移动到窗口的末尾，或者以一定的偏移量移动到另一个元素的末尾。

const parent = $(".parent");
const container = $(".container");
const offset = 250;

const clone = cloner(container, parent, offset);

function cloner(element, parent, offset) {
  const clone = element.clone();
  const width = element.width();

  clone.css({left: width + offset})
  parent.append(clone)
  return clone;
}

function move(element, size = 1) {
  const position = element.position().left;
  const width = element.width();

  if (position < -width) {
    const next = element.siblings().first();
    const nPosition = next.position().left;
    const nWidth = next.width();
    const wWidth = $(window).width();

    if (nPosition + nWidth < wWidth) {
      element.css({left: wWidth})
    } else {
      element.css({left: nPosition + nWidth + offset})
    }

  } else {
    element.css({left: position - size})
  }
}

window.mover = setInterval(() => {
  move(container)
  move(clone)
}, 5)

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
  display: flex;
  overflow: hidden;
  position: relative;
}

.parent>div {
  position: absolute;
  left: 0;
}

.container {
  height: 100%;
  display: flex;
  border: 1px solid tomato;
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}

.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}

.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}

.child4 {
  width: 21rem;
  height: 100%;
  background-color: #C8E7C1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
  </div>
</div>