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