https://codemyui.com/fullscreen-hero-section-parallax-slider/ 连其他网站的大图 有点慢 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全屏视差滚动</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Montserrat); html, body { overflow: hidden; margin: 0; padding: 0; } .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(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-426348.jpg); -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(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-450488.png); } .background:nth-child(3) { background-image: url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-458902.jpg); } /* 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: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; 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"> <div class="content-wrapper"> <p class="content-title">Full Page Parallax Effect</p> <p class="content-subtitle">Scroll down and up to see the effect!</p> </div> </section> <section class="background"> <div class="content-wrapper"> <p class="content-title">Cras lacinia non eros nec semper.</p> <p class="content-subtitle">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.</p> </div> </section> <section class="background"> <div class="content-wrapper"> <p class="content-title">Etiam consequat lectus.</p> <p class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</p> </div> </section> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> <script type="text/javascript"> // ------------- VARIABLES ------------- // var ticking = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) var slideDurationSetting = 600; //Amount of time for which slide is "locked" var currentSlideNumber = 0; var totalSlideNumber = $(".background").length; // ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- // function parallaxScroll(evt) { if (isFirefox) { //Set delta for Firefox delta = evt.detail * (-120); } else if (isIe) { //Set delta for IE delta = -evt.deltaY; } else { //Set delta for all other browsers delta = evt.wheelDelta; } if (ticking != true) { if (delta <= -scrollSensitivitySetting) { //Down scroll ticking = true; if (currentSlideNumber !== totalSlideNumber - 1) { currentSlideNumber++; nextItem(); } slideDurationTimeout(slideDurationSetting); } if (delta >= scrollSensitivitySetting) { //Up scroll ticking = true; if (currentSlideNumber !== 0) { currentSlideNumber--; } previousItem(); slideDurationTimeout(slideDurationSetting); } } } // ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- // function slideDurationTimeout(slideDuration) { setTimeout(function() { ticking = false; }, slideDuration); } // ------------- ADD EVENT LISTENER ------------- // var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel"; window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); // ------------- SLIDE MOTION ------------- // function nextItem() { var $previousSlide = $(".background").eq(currentSlideNumber - 1); $previousSlide.removeClass("up-scroll").addClass("down-scroll"); } function previousItem() { var $currentSlide = $(".background").eq(currentSlideNumber); $currentSlide.removeClass("down-scroll").addClass("up-scroll"); } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 全屏视差滚动 喜欢 (1)or分享 (0)
