我今天研究的案例是世界领先的希腊餐桌橄榄油出口商KonstantopoulosSA“Olymp官网（https://www.konstolymp.gr/），它专注于B2B。它是一个清新现代的网站，将棕色、金色和绿色的土壤色调与顽皮的微互动和动画相结合，同时满足了全球批发B2B客户的专业信息需求。

视觉系统

通过网站中使用的重复模式补充网站的视觉系统，提供一致的品牌体验：

• 将视差滚动与浮动元素（橄榄和橄榄叶的原始和加工可以确保我们的核心内容总是在周围，并与内容进行有趣的互动。
• 彩色调色板，通过补充噪声纹理填充，延伸调色板提供必要的视觉变化。
• 使用照片柔和为核心区域提供梦幻般的照片元素质量，同时确保关注介绍性文本。
• 平滑滚动巧妙加强视差效果和滚动触发的航点，使动画在不妨碍用户导航的情况下运行更多时间。

将视差滚动与浮动元素（原始和加工橄榄和橄榄叶）结合起来，确保我们的角色始终在周围，并与内容进行有趣的互动。

UI元素

让我们从前端设计的角度检查网站的一些UI元素：

• 主页主要CTA：该网站没有使用传统的幻灯片，但只有一个屏幕使用相应的动画效果，突出了产品特性（并非每个网站都需要幻灯片）。
• 菜单动画:导航菜单有两个深度级别。第一列显示第一级元素，第二列显示第二级元素。使用时间轴动画(通过TimelineMax）完成菜单背景和项目动画制作。考虑到分辨率较小的菜单布局变化，使用该技术的动画布局证明了这一挑战。
• 历史和生产工艺部分：这些部分使用复杂的布局表示，结合固定元素（寻呼机和年份指示器）以及图像和副本的受控滚动。年度指标的变化效果是通过一个简单但视觉上令人印象深刻的系统实现的：每个数字由一个垂直的数字列（0-9）使用overflow-hidden说。每次更改时，每列都独立于其当前值旋转到其目标数，具有不同的动画持续时间和延迟，增加了效果的视觉兴趣，而不是太复杂的编程。在分析了要显示的实际年份后，我们选择移动一个元素，使每个元素从9开始，使世纪之交动画不那么跳跃。
• 浮动元素动画。网站达到了自由浮动的效果。

艺术方向

没有适当的专业摄影和视频内容，很难获得良好的用户体验。网站的视频和照片拍摄都很好，可以生成有效的视觉内容。

技术

该网站建设的后端是使用CMSDrupal8构建。它将在前端TimelineMax与动画和ScrollMagic相结合，以实现有针对性的视差和平滑滚动效果。标题中的噪声纹理是通过透明文本填充颜色和纹理来实现的。所有CSS都是按照BEM/SMACSS惯例在SASS中编写的。