项目5：Flex-gallery

欢迎阅读我的“30天构建30个JS项目”系列。这是第5天，也是第5个项目。如果您还没有阅读本系列的其他文章，请先阅读它们。我会在本文末尾列出它们。

正如我之前的文章中提到的，这是Wes Bos Javascript30 课程的第 5 天挑战。

最终结果：

如果使用小屏幕设备，请将 Codepen 的分辨率设置为 0.25 倍以查看完整结果。
我的源代码中
已添加课程中使用的图片，这些图片不包含在课程的起始文件中，因此您可以从我的代码库下载。

正如你所见，它超级可爱！😻😌

像往常一样，在开始之前，请从这里下载启动文件。我专门写了一篇关于如何下载启动文件的文章，你可以在这里查看。

第 1 部分：HTML

正如您所看到的，我在容器内制作了 5 个框，其中包含我们的背景图像和文本。

第 2 部分：CSS

现在我们要设计项目样式。
这是本次挑战的重点。
首先，我们希望所有盒子都像结果所示那样对齐，而实现这一点的最佳方式是使用网格或弹性布局。我使用了弹性布局，并将它们沿容器的列方向对齐。

.container{
    display:flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Amatic SC', cursive;
}

现在我们将转到单独的类并应用背景图像，将这些图像居中并将其大小设置为覆盖以使其填充整个容器元素（单独的框类）。

然后我们只需设置文本的字体大小，并将 h1 设置为 scale(0)，以便将其推入屏幕内部。（这将使文本在稍后呈现出从屏幕中出来的 3d 外观）

然后我再次在盒子上应用了 flex 属性。这样做是为了将所有标题标签放置在 flex:1 的位置，使它们占据 3 行相同的行。

.box{
    flex:1;
    height: 100vh;
    display:flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    gap:2em;
    transition: ease-in-out 0.8s;
    text-transform: uppercase;
    flex-wrap: wrap;
}

然后，我再次对框中的所有元素（即 h3、h1、h3）应用了 flex。这样做是为了进一步将标题标签在各自的 flex 内居中。如果没有这部分，translateY 将无法工作，因为我们需要为要平移的元素提供一个包装器类。您也可以为两个 h3 都添加类来实现这一点。但使用 flex 是为了更好地定位元素。

.box>*{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex:1;
   transition: cubic-bezier(0, 0.95, 0.49, 0.65) 0.8s;


}

然后，我取出第一个和最后一个标签，并将它们平移到框的上方和下方，使它们从屏幕上消失。稍后我们将使用它们来实现结果所示的滑动效果。

.box>*:first-child{
    transform: translateY(-100%);
}
/* moving lower h3 down */
.box>*:last-child{
    transform: translateY(100%);
}

然后，我创建了一个焦点类，通过赋予其 flex:5 来增加用户点击框的大小。稍后我会添加和删除这个类。

.focus{
    flex:5;
}

这就是 css 部分。

第三部分：JavaScript

现在我们将使我们的项目具有交互性。

这个想法是遍历所有带有框类的项目，添加一个事件监听器，如果用户点击框并调用 focusImg 函数，该事件监听器将被调用。

focusImg 函数-->
在这里，我们将添加 focus 类来增加容器的大小，并更改其 transformY 属性，使 h3 滑回框架。
此外，我们希望盒子再次被点击时能够恢复到初始状态。为此，我们只需检查被点击的盒子元素是否添加了 focus 类，如果添加了，则表示用户之前点击过它。现在，我们将移除 focus 类，并使用 transformY 属性移除 h3，以恢复其初始状态。

我学到的东西：

1.嵌套 flex
2.css 中的动画。

本系列的上一篇文章：

项目 4 第 4 天。这个项目讨论了各种重要的数组原型方法，我发现它们非常有用。如果你还没看过，一定要去看看。

结论

这就是今天的项目。下一个项目将是 Ajax Type Ahead 。

如果您有任何疑问或建议，请在评论区告诉我。我非常乐意与您互动。

如果你喜欢这个系列并想成为其中的一部分，请考虑关注我@prachigarg19

谢谢阅读。:)