jquery - Javascript Scrolling Parallax covering up other items on page -
i found neat smooth scrolling background snippet , tweeked bit.
what i'm trying accomplish have these 3 scrolling backgrounds in beginning , after last 1 done, other div's on page show. in example, no matter information put @ bottom of div or above it, background hides all.
if there's easier way accomplish type of smooth scrolling, that'd great, haven't found 1 quite one.
https://jsfiddle.net/jzhang172/xwqsxeff/
$(function(){ // ------------- 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 number change sensitivity trackpad gestures (up = less sensitive; down = more sensitive) var slidedurationsetting = 600; //amount of time slide "locked" var currentslidenumber = 0; var totalslidenumber = $(".background").length; // ------------- determine delta/scroll direction ------------- // function parallaxscroll(evt) { if (isfirefox) { //set delta firefox delta = evt.detail * (-120); } else if (isie) { //set delta ie delta = -evt.deltay; } else { //set delta 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 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"); } });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); -ms-transform: translatey(30vh); transform: translatey(30vh); -webkit-transition: 1.2s cubic-bezier(0.22, 0.44, 0, 1); transition: 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(15, 23, 84, 0.32); } .background:first-child { background-image: url(http://s8.postimg.org/lf2udl5np/4_aihmii.jpg); -webkit-transform: translatey(-15vh); -ms-transform: translatey(-15vh); transform: translatey(-15vh); } .background:first-child .content-wrapper { -webkit-transform: translatey(15vh); -ms-transform: translatey(15vh); transform: translatey(15vh); } .background:nth-child(2) { background-image: url(http://s8.postimg.org/ow4wgk4px/ugqti_lg.jpg); } .background:nth-child(3) { background-image: url(http://s8.postimg.org/grwsbtiat/x_zmobtj.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; font-family: 'libre baskerville', serif; text-transform: uppercase; -webkit-transform: translatey(40vh); -ms-transform: translatey(40vh); transform: translatey(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1.7s cubic-bezier(0.22, 0.44, 0, 1); transition: 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); -ms-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); -ms-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); -ms-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); -ms-transform: translatey(15vh); transform: translatey(15vh); } #one{ background:url(http://s8.postimg.org/lf2udl5np/4_aihmii.jpg); background-repeat: no-repeat; background-size: cover; } #two{ background:red; background:url(http://s8.postimg.org/ow4wgk4px/ugqti_lg.jpg); background-repeat: no-repeat; background-size: cover; } #three{ background:url(http://s8.postimg.org/lf2udl5np/4_aihmii.jpg); background-repeat: no-repeat; background-size: cover; } .content-subtitle{ text-transform:none; } #first{ color:black; } #second{ color:#0058ff; } #third{ color:rgb(236, 230, 216); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> <div class="container"> <section class="background" id="one"> <div class="content-wrapper"> <p class="content-title" id="first">promise</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.<br />nullam tristique urna sed tellus ornare congue. etiam vitae erat @ nibh aliquam dapibus. </p> </div> </section> <section class="background" id="two"> <div class="content-wrapper"> <p class="content-title" id="second">our goal</p> <p class="content-subtitle">blha blah</p> </div> </section> <section class="background" id="three"> <div class="content-wrapper"> <p class="content-title" id="third">global</p> <p class="content-subtitle">blah blah</p> </div> </section> </div> <div> show me , after backgrounds please </div>side note: if scroll somewhere on page , reload page, scroll stays @ current location initial background. idea why? i'm assuming has js.
there 2 things blocking div. first .background position fixed , .background:before position absolute. (:before tag putting element before actual class.)
if want show div after you've done scrolling background, follow ch's answer , manipulate js.
but assume other div continue scroll usual below background div. in order that, must
- disable
overflow:hidden@ html, body tag - disable
position:fixed@.background - do positioning in js smoother transition.
side note: i've tried reload problem in local , works fine
Comments
Post a Comment