scroll-timeline实现竖排反向滚动交叉效果代码
代码语言:html
所属分类:加载滚动
代码描述:scroll-timeline实现竖排反向滚动交叉效果代码
代码标签: scroll-timeline 竖排 反向 滚动 交叉
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Three column layout */ .columns { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 80em; margin: 0 auto; position: relative; } /* Inside one column, lay out all items in column direction */ .column { --column-offset: 10vh; display: flex; flex-direction: column; padding: var(--column-offset) 0; } /* Limit site of the images */ .column__item-imgwrap img { border-radius: 1em; width: 100%; height: auto; aspect-ratio: 0.75; object-fit: cover; } .column__item-caption { text-align: center; } /* Show warning for older browsers */ .warning, .info { position: fixed; right: 1em; left: 1em; bottom: 1em; padding: 1em; border: 1px solid black; z-index: 9999; text-align: center; color: black; background: rgba(255 255 225 / 0.9); } .warning a, .info a { color: blue; } .info { display: none; border: 1px solid #123456; background: rgba(205 230 255 / 0.8); } /* Scroll-Timeline Supported, Yay! */ @supports (animation-timeline: works) { /* Hide Warning */ .warning { display: none; } /* As we're about to shift content out of .columns, we need it to hide its overflow */ .columns { overflow-y: hidden; } .column-reverse { /* Flip item order in reverse columns */ flex-direction: column-reverse; } /* Set up Animation */ @keyframes adjust-position { /* Start position: shift entire column up, but not so that it goes out of view */ from { transform: translateY(calc(-100% + 100vh)); } /* End position: shift entire column down, but not so that it goes out of view */ to { transform: translateY(calc(100% - 100vh)); } } /* Set up scroll-timeline */ @scroll-timeline scroll-in-document { source: auto; /* Default scroll-timeline: scrolling in the document */ } /* Hook our animation with the timeline to our columns */ .column-reverse { animation: 1s adjust-position linear forwards; animation-timeline: scroll-in-document; } } /* general styles */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } </style> </head> <body> <div class="columns" data-scroll-container=""> <div class="column column-reverse"> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/6032e4426c6dd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Cyber Blue</span> <span>2011</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65eac5da40b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Gnostic Will</span> <span>2012</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5df5d4975ee07.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>French Kiss</span> <span>2013</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Half Life</span> <span>2014</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Love Boat</span> <span>2015</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e3632bed9568.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Golden Ray</span> <span>2016</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e5ef121633fa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Blame Game</span> <span>2017</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Lone Dust</span> <span>2018</span> </figcaption> </figure> </div> <div class="column"> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e68316809f5a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Lucky Wood</span> <span>2019</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e957a2236f31.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Good Earth</span> <span>2020</span> </figcaption> </figure> <figure class="column__item"> <div class="column__item-imgwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5eedde0ecfa60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" /> </div> <figcaption class="column__item-caption"> <span>Empt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0