GSAP：滚动触发器示例

2022-09-10 08:30:26 阅读：223 来源： 互联网

标签：触发器示例 100% picsum GSAP photos https 0% 1000

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 示例片段

现在下载

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

GSAP：滚动触发器示例

GSAP：滚动触发器示例

HTML：

CSS：

JavaScript：