cardSpreadPosition实现滚动卡片堆叠位移动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:cardSpreadPosition实现滚动卡片堆叠位移动画效果代码,结合了scroll-timeline.js插件。
代码标签: cardSpreadPosition 滚动 卡片 堆叠 位移 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { overscroll-behavior-x: none; overscroll-behavior-y: none; scroll-behavior: smooth; } body { font-family: "Asap", sans-serif; position: relative; width: 100%; min-height: 100vh; text-align: center; overflow-x: clip; color: gray; display: grid; place-items: center; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient( 135deg, rgba(222, 191, 244, 1) 0%, rgba(255, 178, 178, 1) 100% ); } main { width: 100%; max-width: 100vw; display: grid; place-items: center; } #gallery { --size: 200px; --gap: 10px; --space: 10px; position: relative; width: min(100%, 1000px); overflow-x: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size), 1fr)); gap: var(--gap); padding: var(--gap); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media (max-width: 500px) { #gallery { --size: 170px; } } @property --card-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --card-x { syntax: "<length>"; initial-value: 0px; inherits: false; } @property --card-y { syntax: "<length>"; initial-value: 0px; inherits: false; } .card { --img: url(); --card-x: 0px; --card-y: 0px; --card-angle: 0deg; /* sticky! */ position: sticky; bottom: calc(var(--size) * -1.15); display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.25; padding: 0.5rem; background-color: floralwhite; border-radius: 10px; filter: drop-shadow(0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.5)); -webkit-animation: anim linear both; animation: anim linear both; animation-timeline: view(); animation-range: entry 50% contain 80%; -webkit-animation-duration: 1ms; animation-duration: 1ms; /* for firefox*/ transform-origin: center; transform: rotate3d(0, 0, 1, var(--card-angle)) translate3d(var(--card-x), var(--card-y), 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* @media (orientation: portrait) { .card { bottom: calc(var(--size) * -1.15); } } */ @-webkit-keyframes anim { to { --card-x: 0px; --card-y: 0px; } } @keyframes anim { to { --card-x: 0px; --card-y: 0px; } } .card * { overflow-wrap: anywhere; } .card.msg { display: none; } /* animation-timeline 非対応ブラウザ用 */ @supports not (animation-timeline: view()) { .card.msg { display: block; display: grid; place-items: center; } .msg * { color: crimson !important; } } footer { position: relative; min-height: 100vh; display: grid; place-items: center; color: dimgray; } a { color: currentColor; font-weight: bold; } h2 { text-transform: capitalize; font-size: 1.7rem; } article:nth-child(5n + 1 o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0