luge实现页面滚动动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:luge实现页面滚动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/luge.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Work+Sans&display=swap'> <style> body { background-color: #aefff7; } .catcher { display: flex; width: 100%; height: 100vh; align-items: center; flex-direction: column; justify-content: center; font-family: "Work Sans", sans-serif; font-size: 7vw; letter-spacing: -0.05em; text-align: center; } .catcher small { display: block; font-size: 0.5em; } .b-reveals { display: flex; margin: 0 auto 50vh; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; } .b-reveals__title { display: block; margin: 0 0 1em; width: 100%; font-family: "Work Sans", sans-serif; font-size: 2em; text-align: center; } .b-reveals__cell { margin: 10px; width: 5vw; background: #ffffff; } .b-reveals__cell:before { display: block; padding-top: 100%; content: ""; } .b-reveal { display: flex; margin: 25vh auto; padding: 1em; position: relative; width: 15vw; align-items: center; background-color: #ffffff; justify-content: center; font-family: "Work Sans", sans-serif; font-size: 1.5em; text-align: center; } .b-reveal:before { display: block; padding-top: 100%; content: ""; } .b-reveal:after { display: block; padding: 0.5em 0.5em; position: absolute; left: 50%; top: calc(100% + 2em); background-color: #fff; border-radius: 0.5em; content: 'data-lg-reveal="' attr(data-lg-reveal) '"'; transform: translate3d(-50%, 0, 0); color: #000; font: 12px monospace; text-align: center; white-space: nowrap; } /* Custom reveal */ .lg-reveal--my-reveal-css { opacity: 0; transform: translate3d(0, 50px, 0) rotate(5deg); transform-origin: -25% 100%; transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .lg-reveal--my-reveal-css.is-in { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); } </style> </head> <body> <div class="catcher"> Scroll down <small>👇</small> </div> <div class="reveals"> <div class="b-reveals" data-lg-reveal="fade-to-top" data-lg-reveal-multiple data-lg-reveal-stagger="0.2"> <div class="b-reveals__title"> Staggered reveals </div> <div class="b-reveals__cell"></div> <div class="b-reveals__cell"></div> <div class="b-reveals__cell"></div> <div class="b-reveals__cell"></div> <div class="b-reveals__cell"></div> </div> <div class="b-reveal" data-lg-reveal="fade" data-lg-reveal-multiple> Fade </div> <div class="b-reveal" data-lg-reveal="fade-to-top" data-lg-reveal-multiple> Fade to top </div> <div class="b-reveal" data-lg-reveal="fade-to-right" data-lg-reveal-multiple> Fade to right </div> <div class="b-reveal" data-lg-reveal="fade-to-bottom" data-lg-reveal-multiple> Fade to bottom </div> <div class="b-reveal" data-lg-reveal="fade-to-left" data-lg-reveal-multiple> Fade to left </div> <div class="b-reveal" data-lg-reveal="fade-x" data-lg-reveal-multiple> Fade x </div> <div class="b-reveal" data-lg-reveal="fade-y" data-lg-reveal-multiple> Fade y </div> <div class="b-reveal" data-lg-reveal="fade-scale" data-lg-reveal-multiple> Fade scale </div> <div class="b-reveal" data-lg-reveal="fade-rotate" data-lg-reveal-multiple> Fade rotate </div> <div class="b-reveal" data-lg-reveal="fade-rotate-to-top" data-lg-reveal-multiple> Fade rotate to top </div> <div class="b-reveal" data-lg-reveal="fade-rotate-to-right" data-lg-reveal-multiple> Fade rotate to right </div> <div class="b-reveal" data-lg-reveal="fade-rotate-to-bottom" data-lg-reveal-multiple> Fade rotate to bottom </div> <div class="b-reveal" data-lg-reveal="fade-rotate-to-left" data-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0