gsap实现的自定义滚动卡片滚动效果
代码语言:html
所属分类:加载滚动
代码描述:gsap实现的自定义滚动卡片滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;&display=swap'> <style> html, body { padding: 20px; margin: 0; background-color: #dfe9ef; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; min-height: 100%; font-family: 'Manrope', sans-serif; color: #31393d; } * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } main { width: 300px; height: 550px; background-color: white; border-radius: 16px; overflow: hidden; padding: 30px 20px 20px; box-shadow: 0 6px 20px 0 rgba(202, 208, 216, 0.15); display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } main h1 { font-size: 1.4em; margin-top: 0; margin-bottom: 10px; font-weight: 800; } ::-webkit-scrollbar { display: none; width: 0; background: transparent; height: 0; -webkit-appearance: none; } .scroll { padding: 20px 20px 40px; white-space: nowrap; position: -webkit-sticky; position: sticky; left: 0; top: 0; width: 100%; height: 100%; } .scroll-wrapper { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-left: -20px; margin-right: -20px; position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .scroll-filler { width: 100%; height: 100%; position: absolute.........完整代码请登录后点击上方下载按钮下载查看
网友评论0