Greenshift 怎样制作“固定视口，鼠标悬停时长图垂直向上滚动”的效果

在 Greenshift 中制作这种“固定视口/固定框架，鼠标悬停时图片垂直向上滚动展示”的效果（常用于展示网页全景长图、长海报或 WooCommerce 产品详情），核心逻辑是：利用容器设置固定高度与 overflow: hidden（隐藏超出部分），并在 Hover 状态下改变图片的垂直偏移量或内联位置。

可以通过以下纯可视化方式轻松实现：

最推荐、性能极佳 ：利用图片块的 Transform 变换

这种方法不需要复杂的代码，利用 GPU 加速的 transform: translateY 属性，动画极其流畅。

1. 布局结构搭建

  1. 在页面中插入一个 Box Container（容器块）。
  2. 在该 Container 内部插入一个 Image Advanced（图片块），上传你的长图。

2. 设置固定视口容器（Parent Container）

第2步
第3步
第4步
  1. 选中外层的 Box Container 块。
  2. 在右侧属性面板中在“大小”里设置尺寸：
    • Width：例如 100% 或固定宽度（如 350px）。
    • Height：设为固定的显示框高度（如 300px 或 400px）。
  3. 在“间距”设置里，找到 Overflow（溢出设置）：
    • 将 Overflow 设为 Hidden（此时超出的长图部分就会被截断隐藏）。
  4. 在 Advanced → Position（定位） 中将其设为 Relative。

3. 设置长图片初始状态（Normal State）

  1. 选中内部的 Image 块。
  2. 设置图片的宽度为 100%，高度为 auto（保持图片原始宽高比）。
  3. 进入右侧 Advanced →Transition（过渡效果）：
    • Transition Duration：设为 2s 或 3s（控制滚动完整张图需要的时间，可根据图片长度调节）。
    • Transition Timing Function：选择 ease-in-out 或 ease。

4. 设置鼠标悬停滚动状态（Hover State）

  1. 确保依然选中 Image 块，在右侧属性面板顶部找到状态切换控件，从 Normal 切换为 Hover。
  2. 进入 Transform（变换） 设置：
    • 在 Translate Y（垂直位移） 中输入 -100% 或具体计算值（例如 -70%）。
    • 提示：如果是 -100% 可能会完全移出视口，通常设为 calc(-100% + 400px) 或者手动调至正好能看到图片底部的负百分比（如 -65% 或 -80%）。calc(-100% + 400px) 这个值具体+多少px，根据上面容器设置的高度来。
  3. 保存，预览即可看到鼠标移入时长图平滑向上滚动，移出时平滑返回顶部的效果。

注意：Transition Duration 时间被限制了最大值，最多只能设置5S，如果想设置更多的持续时间，可在 Custom CSS 中设置。

直接在 Greenshift 内置的 Custom CSS（自定义 CSS） 面板中写一行代码即可轻松解决。

  1. 选中该 图片块（Image）。
  2. 打开右侧属性面板，展开 Advanced（高级） -> Custom CSS（自定义 CSS）。
  3. 在代码框中粘贴以下代码（以 12秒 为例）：

CSS

selector {
  transition-duration: 12s !important;
  transition-timing-function: ease-in-out;
}
  • 12s 可以根据长图的实际长度自由修改为任意数值（如 15s 或 20s）。
  • !important 能够强行覆盖 Greenshift 界面设置的 5s 限制。

标签