All geek questions in one place

Javascript Scrolling Parallax closes other elements on the page

I found this neat, smooth, scrollable snippet of background, and I made friends a little.

What I'm trying to accomplish is that these three scrollable backgrounds at the beginning, and then after the last, will show my other div on the page. In my example, no matter what information you put at the bottom of the div or above, the background hides it all.

If there is an easier way to do this type of smooth scroll, that would be great, but I haven't found one like this.

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 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");
}

});
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: 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(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: 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);
      -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 at 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 too and everything after the backgrounds please
</div>
Run code

Side Note. If you scroll to the place and reload the page, the scroll will remain at the current location, but also the original background. Any idea why? I assume this is due to JS.

+4
2

, div. .background .background:before . ( :before .)

div , , CH js.

, div , , div. ,

  • overflow:hidden html, body
  • position:fixed .background
  • js .

: ,

+3

, position:absolute DOM, div, , . , , 0,0 z-: 0.

div -, :

#my-lonely-div{
  z-index: 10;
  position: absolute;
}
+2

Source: https://habr.com/ru/post/1624624/

More articles:


All Articles