locomotive实现差异横向滚动画册画廊效果代码
代码语言:html
所属分类:幻灯片
代码描述:locomotive实现差异横向滚动画册画廊效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; background: #eee; } body { overflow: hidden; } .scroll-animations-example > .scrollsection { padding: 10vh 10vh 10vh 10vmax; min-width: 550vh; } .scroll-animations-example > .scrollsection > .item { display: inline-block; position: relative; margin: 0 -30vh 0 3vh; } .scroll-animations-example > .scrollsection > .item::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .scroll-animations-example > .scrollsection > .item.-big { height: 80vh; width: 60vh; } .scroll-animations-example > .scrollsection > .item.-big.-horizontal { height: 60vh; width: 80vh; } .scroll-animations-example > .scrollsection > .item.-normal { height: 60vh; width: 45vh; z-index: 1; } .scroll-animations-example > .scrollsection > .item.-normal.-horizontal { height: 45vh; width: 60vh; } .scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(3n) { bottom: 5vh; } .scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(4n) { bottom: -5vh; } .scroll-animations-example > .scrollsection > .item.-small { height: 40vh; width: 30vh; z-index: 2; } .scroll-animations-example > .scrollsection > .item.-small.-horizontal { height: 30vh; width: 40vh; } .scroll-animations-example > .scrollsection > .item.-small:nth-of-type(3n) { bottom: 13vh; } .scroll-animations-example > .scrollsection > .item.-small:nth-of-type(4n) { bottom: -13vh; } .scroll-animations-example > .scrollsection > .item > .image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(1); opacity: 0; pointer-events: none; transform: translateX(0) translateY(0) scale(1); transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n) > .image { transform: translateX(-30vh) translateY(-30vh) scale(0.8); transition-delay: 0; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 1) > .image { transform: translateX(30vh) translateY(30vh) scale(0.8); transition-delay: 0.05s; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 2) > .image { transform: translateX(-30vh) translateY(30vh) scale(0.8); transition-delay: 0.1s; } .scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 3) > .image { transform: translateX(-30vh) translateY(-30vh) scale(0.8); transition-delay: 0.15s; } .scroll-animations-example > .scrollsection > .item > .image.-active { transform: translateX(0) translateY(0) scale(1); opacity: 0.8; pointer-events: auto; transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item > .image.-clicked { transform: translateX(0) translateY(0) scale(5); opacity: 0; pointer-events: auto; transition: filter 0.3s ease, opacity 1s ease, transform 1s ease; } .scroll-animations-example > .scrollsection > .item > .image.-active:hover { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(0); opacity: 1; cursor: pointer; } .fake-ui { font-size: 0; } .fake-ui > .logo { position: fixed; top: 2vh; left: 2vh; height: 3vh; width: 2.5vh; border: solid 1vh #999; } .fake-ui > .nav { position: fixed; top: 2vh; right: 2vh; } .fake-ui > .nav > .item { background: #999; display: inline-block; height: 2vh; width: 10vh; margin-left: 2vh; } .fake-ui > .footer { position: fixed; bottom: 3vh; left: 50%; transform: translateX(-50%); height: 2vh; width: 40vh; background: #999; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/locomotive-scroll.4.06.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/locomotive-scroll.4.06.js"></script> </head> <body> <div class='scroll-animations-example' data-scroll-container> <div class='scrollsection' data-scroll-section> <div class='item -normal' data-scroll data-scroll-speed="2"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_800,/quality,q_90'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90'> </div> <div class='item -normal' data-scroll data-scroll-speed="3"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90'> </div> <div class='item -big -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90.........完整代码请登录后点击上方下载按钮下载查看
网友评论0