一个模板，可以在页面周围散布的小图像预览之间切换。单击“探索”链接后，图像将动画显示为网格。
今天我们想和你分享另一个CSS网格驱动的模板。这个想法是在背景中显示导航和一些散焦图像，具有轻微的视差效果。单击“探索”链接后，看似随机放置的项目将在网格中的最终位置生成动画。每个网格都有自己独特的布局。动画完成后，整个内容变为可滚动，内容区域显示在网格下方。
动画由TweenMax提供支持。
注意：请注意，我们使用现有的CSS属性，如旧版浏览器不支持的CSS Grid和CSS Custom Properties。
最初，我们会显示选择第一个项目的导航。将显示图像网格项的预览，这些项预先分散在视口上：
当我们点击另一个导航项时，我们通过垂直动画图像并稍微压缩它们来切换网格预览。根据导航项的位置，我们可以向上或向下移动图像。
一旦我们点击“探索”链接，菜单项就会消失，所有图像都会开始动画显示它们在网格中的位置。扩大规模并变得更加明亮。该页面现在可以滚动，我们可以查看网格下面的内容。
单击顶部箭头将使我们返回导航的预览状态。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261411.html