jquery全屏滚动图文视觉差异效果代码
代码语言:html
所属分类:视觉差异
代码描述:jquery全屏滚动图文视觉差异效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Montserrat); html, body { overflow: hidden; } .background { background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 130vh; position: fixed; width: 100%; -webkit-transform: translateY(30vh); transform: translateY(30vh); -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); } .background:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); } .background:first-child { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png); -webkit-transform: translateY(-15vh); transform: translateY(-15vh); } .background:first-child .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); } .background:nth-child(2) { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png); } .background:nth-child(3) { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png); } /* Set stacking context of slides */ .background:nth-child(1) { z-index: 3; } .background:nth-child(2) { z-index: 2; } .background:nth-child(3) { z-index: 1; } .content-wrapper { height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; -webkit-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); } .content-title { font-size: 12vh; line-height: 1.4; } .background.up-scroll { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0); } .background.up-scroll .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); } .background.up-scroll + .background { -webkit-transform: translate3d(0, 30vh, 0); transform: translate3d(0, 30vh, 0); } .background.up-scroll + .background .content-wrapper { -webkit-transform: translateY(30vh); transform: translateY(30vh); } .background.down-scroll { -webkit-transform: translate3d(0, -130vh, 0); transform: translate3d(0, -130vh, 0); } .background.down-scroll .content-wrapper { -webkit-transform: translateY(40vh); transform: translateY(40vh); } .background.down-scroll + .background:not(.down-scroll) { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0); } .background.down-scroll + .background:not(.down-scroll) .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); } </style> </head> <body> <div class="container"> <section class="background&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0