GSAP：滚动触发器示例

GSAP：ScrollTrigger 示例免费下载 在 HTML、CSS 和 JavaScript 中

HTML：

 。应用程序  
 section.section(v-for="(data, index) in contents")  
 h1.title {{ 数据.title }}  
 .graphic(:style="'background-image: url(' + data.image + ')'")

您可能还想下载： HTML、CSS 和 JavaScript 中的 CSS 过渡编辑器

CSS：

 身体 {  
 宽度：100vw；  
 高度：100vh * 12；  
 背景：#000；  
 } 。应用程序 {  
 填充顶部：100vh；  
 } 。部分 {  
 位置：相对；  
 宽度：100%；  
 高度：100vh；  
 背景尺寸：封面； 。标题 {  
 位置：固定；  
 底部：100px；  
 左：50px；  
 z指数：2；  
 颜色：#fff;  
 字体家族：'Dosis'，无衬线；  
 字体大小：3rem；  
 溢出：隐藏；  
 } 。形象的 {  
 位置：固定；  
 顶部：0；  
 左：0；  
 z-index：1；  
 宽度：100vw；  
 高度：100vh；  
 背景尺寸：封面；  
 }  
 }

JavaScript：

 gsap.registerPlugin(ScrollTrigger) 新视图（{  
 的：'.app'， 数据： {  
 内容： [  
 {  
 标题：“丹尼尔维尔”，  
 图片：'https://picsum.photos/seed/photo1/1000',  
 },  
 {  
 标题：“阿加莎霍尔本”，  
 图片：'https://picsum.photos/seed/photo2/1000',  
 },  
 {  
 标题：'Leonora-Lettie Tomson'，  
 图片：'https://picsum.photos/seed/photo3/1000',  
 },  
 {  
 标题：“塔林·蕾哈娜·利瑞”，  
 图片：'https://picsum.photos/seed/photo4/1000',  
 },  
 {  
 标题：“克里斯汀·埃尔芬斯通”，  
 图片：'https://picsum.photos/seed/photo5/1000',  
 },  
 {  
 标题：“贾兹林希尔顿”，  
 图片：'https://picsum.photos/seed/photo6/1000',  
 },  
 {  
 标题：“艾丽莎-朱厄尔·伍兹”，  
 图片：'https://picsum.photos/seed/photo7/1000',  
 },  
 {  
 标题：'Ariel-Rayna Steel'，  
 图片：'https://picsum.photos/seed/photo8/1000',  
 },  
 {  
 标题：'Sidney-Patricia Carwardine'，  
 图片：'https://picsum.photos/seed/photo9/1000',  
 },  
 {  
 标题：“迪泡菜”，  
 图片：'https://picsum.photos/seed/photo10/1000',  
 }  
 ]  
 }, 挂载（）{  
 让我 = 0  
 const polygonFrom = '多边形(0% 100%, 100% 100%, 100% 200%, 0% 200%)'  
 const polygonTo = '多边形(0% -100%, 100% -100%, 100% 0%, 0% 0%)'  
 // const polygonFrom = 'polygon(0% 100%, 100% 120%, 100% 220%, 0% 200%)'  
 // const polygonTo = 'polygon(0% -120%, 100% -100%, 100% 0%, 0% -20%)'  
 for (i = 0; i < this.contents.length; i++) {  
 gsap.fromTo('.section:nth-child(' + (i + 1) + ') .title', {  
 剪辑路径：多边形从，  
 }, {  
 剪辑路径：多边形到，  
 轻松：'线性'，  
 滚动触发器：{  
 // 标记：真，  
 触发器：'.section:nth-child(' + (i + 1) + ')',  
 开始：'顶部中心+ = 300px'，  
 end: '底部-=300px 顶部',  
 磨砂膏：是的，  
 }  
 }) gsap.fromTo('.section:nth-child(' + (i + 1) + ') .graphic', {  
 剪辑路径：多边形从，  
 backgroundPositionY: '60px',  
 }, {  
 剪辑路径：多边形到，  
 backgroundPositionY: '-60px',  
 轻松：'线性'，  
 滚动触发器：{  
 // 标记：真，  
 触发器：'.section:nth-child(' + (i + 1) + ')',  
 开始：'顶部底部'，  
 结束：'底部顶部'，  
 磨砂膏：是的，  
 }  
 })  
 }  
 },  
 })

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 GSAP：ScrollTrigger 示例片段

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/24428/22251008

标签：触发器,示例,100%,picsum,GSAP,photos,https,0%,1000
来源： https://www.cnblogs.com/amboke/p/16675953.html