今天我研究的案例是世界领先的希腊餐桌橄榄油出口商Konstantopoulos SA“Olymp”的官方网站（https://www.konstolymp.gr/），它重点关注B2B。它是一个清新现代的网站，将棕色，金色和绿色的泥土色调与俏皮的微交互和动画相结合，同时满足了全球批发B2B客户的专业信息需求。
视觉系统
网站的视觉系统通过网站中使用的重复模式进行补充，以提供一致的品牌体验：
- 将视差滚动与浮动元素（原始和加工橄榄和橄榄叶）结合使用可确保我们的核心内容始终在周围，与内容进行有趣的互动。
- 彩色调色板，通过补充噪声纹理填充，而延伸调色板提供必要的视觉变化。
- 使用柔和的的照片为核心区域提供梦幻般的照片元素质量，同时确保重点放在介绍性文本上。
- 平滑滚动用于巧妙地加强视差效果和滚动触发的航点，从而允许更多时间让动画在不妨碍用户导航的情况下运行。
将视差滚动与浮动元素（原始和加工橄榄和橄榄叶）结合使用可确保我们的角色始终在周围，与内容进行有趣的互动。
UI元素
让我们从前端设计角度检查网站的一些UI元素：
-
主页主要CTA：网站没有采用传统的幻灯片，而是只有一屏使用相应的动画效果的内容，很好的突出了产品特性（并不是每个网站都需要幻灯片）。
-
菜单动画：导航菜单有两个深度级别。使用了两列布局，第一列显示了第一级元素，第二列显示了第二级元素。使用时间轴动画（通过TimelineMax）完成菜单背景和项目的动画制作。考虑到较小分辨率的菜单布局变化，使用这种技术的动画编排证明极具挑战性。
-
历史和生产过程部分：这些部分使用复杂的布局表示，结合固定元素（寻呼机和年份指示器）以及图像和副本的受控滚动。年度指标的变化效果是通过一个简单但视觉上令人印象深刻的系统实现的：每个数字由一个垂直的数字列（0-9）使用overflow-hidden表示。在每次更改时，每列独立于其当前值旋转到其目标数，具有不同的动画持续时间和延迟，增加了效果的视觉兴趣，而没有过多的编程复杂性。在分析了要显示的实际年份后，我们选择将列移动一个元素，使每个元素从9开始，从而使“世纪之交”动画不那么跳跃。
-
浮动元素动画。网站达到了“自由浮动”效果。
艺术方向
如果没有适当的专业摄影和视频内容很难达到良好的用户体验。网站的视频及照片的拍摄都是非常棒的，可以生成有效的视觉内容。
技术
该网站建设的后端是使用CMS Drupal 8构建的。在前端，它将TimelineMax与动画和ScrollMagic相结合，以实现有针对性的视差和平滑滚动效果。标题中的噪声纹理是通过透明文本填充颜色与纹理可平铺背景图像相结合实现的。所有CSS都是按照BEM / SMACSS惯例在SASS中编写的。
