标签:触发器 示例 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 示例片段
版权声明:本文为博主原创文章,遵循 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
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。