javascripthtmljquerycssparallax

CSS and JS full-screen Parallax effect with scroll

I am implementing a full page parallax effect like this demo. But my code is working like a vertical slider since I am unable to view the full content of slider 2 and slider 3. I am trying to add a scroller behavior instead of slider behavior same like the demo. It would be greatful if someone could advise me on how to add a scroller behaviour.

My code in JS_Filddle

My Code:

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;
var slideDurationSetting = 800;
var currentSlideNumber = 0;
var totalSlideNumber = $(".background").length;
function parallaxScroll(evt) {
  if (isFirefox) {
    delta = evt.detail * -120;
  } else if (isIe) {
    delta = -evt.deltaY;
  } else {
    delta = evt.wheelDelta;
  }
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}
function slideDurationTimeout(slideDuration) {
  setTimeout(function () {
    ticking = false;
  }, slideDuration);
}
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, parallaxScroll, false);
function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide
    .css("transform", "translate3d(0,-130vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(40vh)");
  currentSlideTransition();
}
function previousItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber + 1);
  $previousSlide
    .css("transform", "translate3d(0,30vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(30vh)");
  currentSlideTransition();
}
function currentSlideTransition() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide
    .css("transform", "translate3d(0,-15vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(15vh)");
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

/* core css */

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(20vh);
  -ms-transform: translateY(20vh);
  transform: translateY(20vh);
  -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.4s 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://unsplash.it/2928/2264?image=325);
  -webkit-transform: translateY(-10vh);
  -ms-transform: translateY(-10vh);
  transform: translateY(-10vh);
}

.background:first-child .content-wrapper {
  -webkit-transform: translateY(10vh);
  -ms-transform: translateY(10vh);
  transform: translateY(10vh);
}

.background:nth-child(2) { /*background-image: url(https://unsplash.it/2928/2264?image=425);*/
background-color: #000000;
}

.background:nth-child(3) { background-image: url(https://unsplash.it/2928/2264?image=525); }

.background:nth-child(4) { background-image: url(https://unsplash.it/2928/2264?image=625); }

.background:nth-child(5) { background-image: url(https://unsplash.it/2928/2264?image=626); }

.background:nth-child(6) { background-image: url(https://unsplash.it/2928/2264?image=825); }

/* Set stacking context of slides */

.background:nth-child(1) { z-index: 6; }

.background:nth-child(2) { z-index: 5; }

.background:nth-child(3) { z-index: 4; }

.background:nth-child(4) { z-index: 3; }

.background:nth-child(5) { z-index: 2; }

.background:nth-child(6) { z-index: 1; }

.content-wrapper {
  min-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;
  -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.9s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
}

.content-title {
  font-size: 12vh;
  line-height: 1.4;
  text-transform: uppercase;
}
.content-subtitle {
  font-size: 16px;
  line-height: 20px;
}
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<div class="container">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section One</p>
      <p class="content-subtitle">Scroll down the page with mouse wheel</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Two</p>
      <p class="content-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at luctus augue. Nullam magna nisi, euismod facilisis odio accumsan, tincidunt mattis lacus. Cras volutpat, purus eget ultrices vestibulum, est nulla tempor purus, in auctor ligula orci nec lorem. Cras condimentum a lectus id aliquet. Maecenas hendrerit turpis vel est posuere, quis porta nisi tristique. Cras viverra ante eu imperdiet viverra. Vestibulum at aliquet nisl. Nulla placerat, augue a congue ultricies, risus ex viverra ante, nec lacinia velit ipsum non enim. Integer varius massa aliquam viverra consectetur. Nam dignissim metus ut iaculis feugiat. Mauris eros massa, viverra at orci eget, tempor gravida tellus. Sed enim erat, dapibus nec tortor eget, varius ullamcorper odio. Ut ut lacinia justo. Proin libero augue, tincidunt non lorem id, pretium tincidunt diam. Curabitur tempor ullamcorper pulvinar.</p>

<p class="content-subtitle">Curabitur ac scelerisque libero, et auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque a orci dictum, finibus lorem in, malesuada ipsum. Mauris eget libero nec ex gravida mattis sit amet a diam. Integer laoreet varius eros, at malesuada lorem volutpat eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris finibus lacus et massa elementum, nec elementum massa porttitor. Curabitur in tempus tortor, eget porttitor ipsum. Curabitur consectetur odio eget arcu vestibulum efficitur. Integer facilisis et sem vel facilisis. Duis a nulla laoreet, ultrices felis vitae, dapibus ipsum. Integer congue sodales lectus, ac venenatis nibh tempor ut. Nunc blandit semper nibh vitae sodales. Etiam tempus volutpat arcu, vitae tempus risus porta ultrices. Nullam quam ex, facilisis non facilisis et, tincidunt non turpis. Donec id risus aliquam, bibendum ex quis, ultrices diam.</p>

<p class="content-subtitle">Pellentesque condimentum pellentesque leo, in blandit nibh accumsan vel. Phasellus quis pretium ex. Donec sed sapien a enim luctus commodo eget vel odio. Fusce aliquet libero nulla, eget pellentesque orci porttitor pretium. In scelerisque massa et pellentesque sodales. Aenean molestie nisl in diam fermentum malesuada. Nunc euismod, ipsum nec tempor tincidunt, quam dolor sodales ipsum, in laoreet ante arcu sit amet odio. Proin fringilla, magna in commodo mattis, lacus velit mattis justo, ac tincidunt nunc nibh sit amet tortor. Cras dignissim laoreet quam ut tincidunt.</p>

<p class="content-subtitle">Nam eu gravida nibh. Vestibulum quis mi lacinia, dignissim tortor eu, blandit neque. Etiam vitae laoreet tortor, at cursus orci. Nulla eget ligula eros. Nulla congue dui libero, pulvinar tincidunt ipsum sagittis eu. Nullam aliquet venenatis tortor, et convallis metus condimentum sed. Cras non feugiat enim. Nullam dui mauris, lobortis at tortor a, hendrerit feugiat metus. Aenean id purus eu nibh euismod scelerisque at id ligula. Curabitur commodo justo ac ligula tincidunt accumsan.</p>
 <p class="content-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at luctus augue. Nullam magna nisi, euismod facilisis odio accumsan, tincidunt mattis lacus. Cras volutpat, purus eget ultrices vestibulum, est nulla tempor purus, in auctor ligula orci nec lorem. Cras condimentum a lectus id aliquet. Maecenas hendrerit turpis vel est posuere, quis porta nisi tristique. Cras viverra ante eu imperdiet viverra. Vestibulum at aliquet nisl. Nulla placerat, augue a congue ultricies, risus ex viverra ante, nec lacinia velit ipsum non enim. Integer varius massa aliquam viverra consectetur. Nam dignissim metus ut iaculis feugiat. Mauris eros massa, viverra at orci eget, tempor gravida tellus. Sed enim erat, dapibus nec tortor eget, varius ullamcorper odio. Ut ut lacinia justo. Proin libero augue, tincidunt non lorem id, pretium tincidunt diam. Curabitur tempor ullamcorper pulvinar.</p>

<p class="content-subtitle">Curabitur ac scelerisque libero, et auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque a orci dictum, finibus lorem in, malesuada ipsum. Mauris eget libero nec ex gravida mattis sit amet a diam. Integer laoreet varius eros, at malesuada lorem volutpat eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris finibus lacus et massa elementum, nec elementum massa porttitor. Curabitur in tempus tortor, eget porttitor ipsum. Curabitur consectetur odio eget arcu vestibulum efficitur. Integer facilisis et sem vel facilisis. Duis a nulla laoreet, ultrices felis vitae, dapibus ipsum. Integer congue sodales lectus, ac venenatis nibh tempor ut. Nunc blandit semper nibh vitae sodales. Etiam tempus volutpat arcu, vitae tempus risus porta ultrices. Nullam quam ex, facilisis non facilisis et, tincidunt non turpis. Donec id risus aliquam, bibendum ex quis, ultrices diam.</p>

<p class="content-subtitle">Pellentesque condimentum pellentesque leo, in blandit nibh accumsan vel. Phasellus quis pretium ex. Donec sed sapien a enim luctus commodo eget vel odio. Fusce aliquet libero nulla, eget pellentesque orci porttitor pretium. In scelerisque massa et pellentesque sodales. Aenean molestie nisl in diam fermentum malesuada. Nunc euismod, ipsum nec tempor tincidunt, quam dolor sodales ipsum, in laoreet ante arcu sit amet odio. Proin fringilla, magna in commodo mattis, lacus velit mattis justo, ac tincidunt nunc nibh sit amet tortor. Cras dignissim laoreet quam ut tincidunt.</p>

<p class="content-subtitle">Nam eu gravida nibh. Vestibulum quis mi lacinia, dignissim tortor eu, blandit neque. Etiam vitae laoreet tortor, at cursus orci. Nulla eget ligula eros. Nulla congue dui libero, pulvinar tincidunt ipsum sagittis eu. Nullam aliquet venenatis tortor, et convallis metus condimentum sed. Cras non feugiat enim. Nullam dui mauris, lobortis at tortor a, hendrerit feugiat metus. Aenean id purus eu nibh euismod scelerisque at id ligula. Curabitur commodo justo ac ligula tincidunt accumsan.</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Three</p>
      <p class="content-subtitle">Quisque ut egestas nulla</p>
      <p class="content-subtitle">Curabitur ac scelerisque libero, et auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque a orci dictum, finibus lorem in, malesuada ipsum. Mauris eget libero nec ex gravida mattis sit amet a diam. Integer laoreet varius eros, at malesuada lorem volutpat eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris finibus lacus et massa elementum, nec elementum massa porttitor. Curabitur in tempus tortor, eget porttitor ipsum. Curabitur consectetur odio eget arcu vestibulum efficitur. Integer facilisis et sem vel facilisis. Duis a nulla laoreet, ultrices felis vitae, dapibus ipsum. Integer congue sodales lectus, ac venenatis nibh tempor ut. Nunc blandit semper nibh vitae sodales. Etiam tempus volutpat arcu, vitae tempus risus porta ultrices. Nullam quam ex, facilisis non facilisis et, tincidunt non turpis. Donec id risus aliquam, bibendum ex quis, ultrices diam.</p>

<p class="content-subtitle">Pellentesque condimentum pellentesque leo, in blandit nibh accumsan vel. Phasellus quis pretium ex. Donec sed sapien a enim luctus commodo eget vel odio. Fusce aliquet libero nulla, eget pellentesque orci porttitor pretium. In scelerisque massa et pellentesque sodales. Aenean molestie nisl in diam fermentum malesuada. Nunc euismod, ipsum nec tempor tincidunt, quam dolor sodales ipsum, in laoreet ante arcu sit amet odio. Proin fringilla, magna in commodo mattis, lacus velit mattis justo, ac tincidunt nunc nibh sit amet tortor. Cras dignissim laoreet quam ut tincidunt.</p>

<p class="content-subtitle">Nam eu gravida nibh. Vestibulum quis mi lacinia, dignissim tortor eu, blandit neque. Etiam vitae laoreet tortor, at cursus orci. Nulla eget ligula eros. Nulla congue dui libero, pulvinar tincidunt ipsum sagittis eu. Nullam aliquet venenatis tortor, et convallis metus condimentum sed. Cras non feugiat enim. Nullam dui mauris, lobortis at tortor a, hendrerit feugiat metus. Aenean id purus eu nibh euismod scelerisque at id ligula. Curabitur commodo justo ac ligula tincidunt accumsan.</p>
<p class="content-subtitle">Curabitur ac scelerisque libero, et auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque a orci dictum, finibus lorem in, malesuada ipsum. Mauris eget libero nec ex gravida mattis sit amet a diam. Integer laoreet varius eros, at malesuada lorem volutpat eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris finibus lacus et massa elementum, nec elementum massa porttitor. Curabitur in tempus tortor, eget porttitor ipsum. Curabitur consectetur odio eget arcu vestibulum efficitur. Integer facilisis et sem vel facilisis. Duis a nulla laoreet, ultrices felis vitae, dapibus ipsum. Integer congue sodales lectus, ac venenatis nibh tempor ut. Nunc blandit semper nibh vitae sodales. Etiam tempus volutpat arcu, vitae tempus risus porta ultrices. Nullam quam ex, facilisis non facilisis et, tincidunt non turpis. Donec id risus aliquam, bibendum ex quis, ultrices diam.</p>

<p class="content-subtitle">Pellentesque condimentum pellentesque leo, in blandit nibh accumsan vel. Phasellus quis pretium ex. Donec sed sapien a enim luctus commodo eget vel odio. Fusce aliquet libero nulla, eget pellentesque orci porttitor pretium. In scelerisque massa et pellentesque sodales. Aenean molestie nisl in diam fermentum malesuada. Nunc euismod, ipsum nec tempor tincidunt, quam dolor sodales ipsum, in laoreet ante arcu sit amet odio. Proin fringilla, magna in commodo mattis, lacus velit mattis justo, ac tincidunt nunc nibh sit amet tortor. Cras dignissim laoreet quam ut tincidunt.</p>

<p class="content-subtitle">Nam eu gravida nibh. Vestibulum quis mi lacinia, dignissim tortor eu, blandit neque. Etiam vitae laoreet tortor, at cursus orci. Nulla eget ligula eros. Nulla congue dui libero, pulvinar tincidunt ipsum sagittis eu. Nullam aliquet venenatis tortor, et convallis metus condimentum sed. Cras non feugiat enim. Nullam dui mauris, lobortis at tortor a, hendrerit feugiat metus. Aenean id purus eu nibh euismod scelerisque at id ligula. Curabitur commodo justo ac ligula tincidunt accumsan.</p>
    </div>
  </section>
    <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Four</p>
      <p class="content-subtitle">Scroll down the page with mouse wheel</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Five</p>
      <p class="content-subtitle">Lorem ipsum dolor sit amet</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Six</p>
      <p class="content-subtitle">Quisque ut egestas nulla</p>
    </div>
  </section>
</div>

Solution

  • I have achieved the full-screen parallax scroll effect using curtain.js plugin

    https://github.com/victa/curtain.js