Solution 1 :

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

Problem :

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


Comment posted by Rkv88 – Kanyan

hi the steps you descriped are all in the codepen , what exactly you want to add do you want to just insert one slide before and one after???

Comment posted by Aventus

thanks for this. what if I want to make 2 heroes without the parallax effect. so it will look like the first hero will be my landing page, and my 2nd hero will be an About, and the parallax effect will be my portfolio for example.

Comment posted by Aventus

sorry i think there’s a minsunderstanding, i still want to have the parallax for section for let’s say 3-5, but section 1-2 are non-parallax, same with 6-7 for example. the codepen now only have 2 sections. the parallax was totally removed. thank you

Comment posted by Aventus

Kanyan what do you think? 🙂