javascript – How to re-use this parallax inside a section-ThrowExceptions

Exception or error:

I saw this parallax code from Codepen

<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>
  <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>
  <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>
// ------------- 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) {
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {

// ------------- 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);

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);

I want to utilize it but I want to add two (non-parallax) hero section at the top and 2 at the bottom (non-parallax).

  1. At the homepage, user will see the non-parallax hero (image) first
  2. and when he scrolls down will see the 2nd non-parallax hero, then the next section is the parallax and will be triggered
  3. Once all the parallax has been navigated, another fixed image (similar to #1) will again show.
  4. and when user scrolls back up, parallax (in reverse) will be
How to solve:

take a look at this , i added a hero section before and after the 3 sections


  1. in HTML you duplicate the scection tag with its content only change the texts

  2. in SCSS you duplicate the &:nth-child(3) {
    background-image: url(;

    the 3 here is the number of the hero so if you want 10 heros you duplicate 10 times each time increment that number

  3. also in SCSS you change the $slide-number: 5; to the number of Heros you want in this example it’s 5 heros


to implement this code first you load jquery from in script tag
also LoadAsh library from

also install sass then run sass NAME_OF_CSS_FILE index.css
then link this index.css in your webpage

ps: if you dont want to use scss go to options in css pane in codepen then select show compiled css .. copy that css into your portfolio

also if you landing page/about separate i edited the code for another page

Leave a Reply

Your email address will not be published. Required fields are marked *