Tag: GSAP高级效果

  • 使用 Elementor 中的 GSAP ScrollTrigger 创建点击滚动效果

    使用 Elementor 中的 GSAP ScrollTrigger 创建点击滚动效果

    想要打造那种流畅又引人入胜的滚动体验?你可以试试在 Elementor 中结合 GSAP 的 ScrollTrigger 功能。通过自定义 GSAP 动画和 Elementor,创建一种点击即可滚动的效果,让页面滚动起来如丝般顺滑,让用户的体验更具沉浸感。

    这种方法非常适合那些想要让自己的 Elementor 项目更上一层楼的网页设计师们,特别是在需要高级的滚动或滑块效果时。无论是企业网站、个人作品集还是垂直电商平台,都能让你的页面瞬间脱颖而出。

    演示地址:https://demo-show.361sale.com/elementor-effects-15

    文件下载地址↓

    点击获取下载文件后,你会得到一个文件。

    图片[1]-361Sale WordPress Care

    请确保安装已经安装好Elementor免费版和Elementor Pro版。只有Elementor Pro版才有模版导入功能。

    图片[2]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[3]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    网站后端找到页面,点击添加新页面。如上图:

    图片[4]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    启用Elementor编辑。如上图:

    图片[5]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    点击添加旁边文件的图标,也就是模版。如上图:

    图片[6]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    点击右上角的上传标志,然后点击选择文件,然后再在本地文件选择刚刚下载的文件。如上图:

    图片[7]-361Sale WordPress Care

    然后回到我的模版,即可查看我们刚刚导入的模版,点击预览查看效果,然后再选择插入。如上图

    导入完成后查看效果,有可能会出现页眉页脚,那就需要选择好对应的模版了。

    图片[8]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    点击我们刚刚导入的模版的页面,然后点击编辑。如上图:

    图片[9]-Elementor特效模版1-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

    选择模版,选择elementor画布,选择这个是因为不显示页眉和页脚,只显示模版内容。如上图

    图片[10]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)

    同时在使用elmentor编辑页面,选择站点设置,在选择布局。如上图:

    图片[11]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)

    也要确保一样是Elementor画布模版。这样就不会有其他内容。如上图:

    图片[12]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[13]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)
    图片[14]-如何在 Elementor 中添加滚动视频序列提升视觉冲击力(附演示与下载)

    请关闭标头和页脚里面的内容,点击后隐藏里面的内容,如上图:

    需要注意的是,虽然图片比较简单,但是效果很不错,你替换成你自己的图片或者视频就非常炫了。

    最后保存,查看前端效果是否正常。