TweenMax实现全屏视觉差异图片更换效果代码
代码语言:html
所属分类:视觉差异
代码描述:TweenMax实现全屏视觉差异图片更换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: none; overflow: hidden; } body { font-family: "Playfair Display", serif; color: #fff; min-height: 800px; } .container { width: 100vw; height: 100vh; position: fixed; overflow: hidden; } .child-left-1, .child-left-2, .child-left-3, .child-left-4, .child-right-1, .child-right-2, .child-right-3, .child-right-4 { position: absolute; width: 100vw; height: 100vh; overflow: hidden; } .left, .right { position: absolute; width: 100vw; height: 20vh; background-attachment: fixed; background-size: cover; overflow: hidden; } .left1 { top: 0; } .left2 { top: 20vh; } .left3 { top: 40vh; } .left4 { top: 60vh; } .left5 { top: 80vh; } h1 { position: absolute; z-index: 3; font-size: 100px; color: #fff; left: 50%; top: 50%; transform: translate(-50%, -20%); font-weight: normal; letter-spacing: 40px; text-transform: uppercase; opacity: 0; transition: all 0.7s ease-in-out; } .header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; display: flex; justify-content: space-between; font-size: 20px; padding: 55px 90px; max-width: 84%; left: 50%; transform: translateX(-50%); } .header a { color: #fff; margin-right: 60px; font-size: 16px; text-decoration: none; } .header a:last-child { margin-right: 0; } .child-left-2 h1 { transform: translate(-50%, -64%); } .slide.active.child-left-2 h1 { transform: translate(-50%, -94%); opacity: 1; } .slide.active h1 { transform: translate(-50%, -50%); opacity: 1; } .child-left-1 { z-index: 2; } .child-left-1 .left-top { background-image: url("//repo.bfw.wiki/bfwrepo/image/6087ddfceccac.png"); background-position: -151px -42px; background-size: 108%; z-index: 2; } .child-left-1 .left-bottom { background-image: url("//repo.bfw.wiki/bfwrepo/image/6087de20b98be.png"); background-position: -151px -42px; background-size: 108%; z-index: 4; } .child-left-2 { z-index: 4; } .child-left-2 .left-top { background-image: url("//repo.bfw.wiki/bfwrepo/image/6087de44ce666.png"); z-index: 2; } .child-left-2 .left-bottom { background-image: url("//repo.bfw.wiki/bfwrepo/image/6087de631dec9.png"); z-index: 4; } .button-left, .button-right { width: 100px; height: 50px; background: #1b1b1b; z-index: 20; overflow: hidden; font-family: "Roboto", sans-serif; font-weight: 100; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: skewX(-6deg); margin-top: auto; margin-bottom: auto; text-align: center; padding-top: 14px; transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); cursor: pointer; } .button-left:before, .button-right:before { content: ""; position: absolute; overflow: hidden; top: 25px; bottom: 0; left: 0; right: 0; width: 100px; z-index: -1; height: 0; background: #fff; color: #1b1b1b; transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .button-left:hover:before, .button-right:hover:before { top: 0; height: 50px; padding-top: 14px; } .button-left .view, .button-right .view { color: #fff; mix-blend-mode: difference; z-index: 20; } .button-left { margin-left: 19vw; } .button-right { margin-left: 69vw; } .l1 { width: 60vw; } .r1 { width: 40vw; margin-left: 60vw; } .l2 { width: 40vw; } .r2 { width: 60vw; margin-left: 40vw; } .rr { width: 60vw; } .cl1 { width: 100vw; } .cr1 { width: 0vw; margin-left: 100vw; } .cl2 { width: 0vw; } .cr2 { width: 100vw; margin-left: 0vw; } .crr { width: 100vw; } .close { position: absolute; z-index: 30; width: 80px; height: 80px; background: #1b1b1b; top: 0; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; overflow: hidden; cursor: pointer; } .close span { display: block; position: absolute; width: 60px; height: 1px; background: #fff; top: 0; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; cursor: pointer; } .close .lin1 { transform-origin: center; transform: rotate(45deg); } .close .lin2 { transform-origin: center; transform: rotate(-45deg); } .close:hover { background: #fff; } .close:hover span { background: #000; } .scroll-indicator { width: 2px; position: absolute; height: 85px; background: #fff; left: 0; right: 0; top: 0; bottom: 0; margin-top: 95vh; margin-left: auto; margin-right: auto; z-index: 50; opacity: 1; transition: 0.4s; -webkit-animation: ani 1s linear infinite; animation: ani 1s linear infinite; } @-webkit-keyframes ani { 0% { height: 0px; } 25% { height: 85px; } 55% { height: 85px; } 100% { transform-origin: bottom; transform: scaleY(0); } } @keyframes ani { 0% { height: 0px; } 25% { height: 85px; } 55% { height: 85px; } 100% { transform-origin: bottom; transform: scaleY(0); } } .scroll { font-family: "Roboto", sans-serif; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; text-align: center; margin-top: 91vh; font-weight: 300; font-style: oblique; z-index: 50; opacity: 1; transition: 0.4s; } .opa { opacity: 0; } </style> </head> <body > <header class="header"> <p class="logo">Vision</p> <nav class="menu"> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> </nav> </header> <div class="container"> <div class="slide child-left-1"> <div class="left1 left left-top"></div> <div class="left2 left left-top"></div> <div class="left3 left left-top"></div> <div class="left4 left left-top"></div> <div class="left5 left left-top"></div> <h1>Meilat</h1> <div class="left1 left left-bottom"></div> <div class="left2 left left-bottom"></div> <div class="left3 left left-bottom"></div> <div class="left4 left left-bottom"></div> <div class="left5 lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0