滚动，增长，缩小，随机放置图像选框？

Question

我们试图为我们的客户提供循环效果效果＆＃39;此页面类似于Stripe的关于页面。这会是什么方法？看起来这里发生了几件事：

• 循环/无限滚动
• grow onload
• 随机放置但不重叠
• 随机选择
• 当他们到达容器边缘时成长/收缩（无法在任何地方找到）

追求这种效果是否值得？ Stripe的js文件太先进了，我无法弄明白。有什么想法吗？

参考：https://stripe.com/about

这就是现在的样子（静态，无移动，滚动等）：

＆＃13;

＆＃13;

.container {max-width:1140px;margin:0 auto;}

.doc-portrait {border-radius: 50px;
    height: 60px;
    margin: 50px 49px 0px 50px;
    display: inline-block;}

＆＃13;

<div class="container clear">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
<img src="http://placehold.it/60x60/007ee5/ffffff" class="doc-portrait">
</div>

＆＃13;

＆＃13;

＆＃13;

我们希望它看起来像什么（滚动，增长/缩小等）（我们可以根据需要添加尽可能多的头像来填充它）：

真的跟这个有关...

Answer 1

  

追求这种效果是否值得呢？

没有。

很可能不是。它非常整洁，这是肯定的。你有所有顾客的照片吗？你有他们的信息和链接吗？这就是条纹页面的内容......显示他们拥有大量快乐的员工，您可以点击并查看他们的故事和他们的github或Twitter ......这很有趣，因为他们有钱和时间做有趣的事情。 / p>

我建议写下您网页的目标，然后找到实现该目标的最快捷方式。我打赌它不会复制这个头像滑块。

Answer 2

这是我的意识流。

我会有一个数组跟踪哪些头像当前在屏幕上，哪些不是，在它们出现/消失时在它们之间移动项目。

当你在屏幕上移动一个时，它会向右移动，大小为零，随机半径和y位置。在放置它之前，使用一些几何体（也许有一种方法可以做到这一点？）看它是否与任何其他圆相交（你可以使用下面的方法得到它们的位置）。如果高度不起作用，请继续尝试，直到找到一个高度。一个简单的动画类运行一次以增长元素。

有一个方法getBoundingClientRect（），它在视口坐标中给出元素位置。您可以将事件监听器附加到每个头像，以查看getBoundingClientRect返回的left值是否小于您想要开始收缩的位置，然后使用简单的css收缩动画。