網頁的全頁面視差滾動效果

Question

我正在創建一個網頁，並從Codepen復制了代碼，但遇到了問題...

HTML代碼：

<div class="container">
     <section class="background up-scroll">
         <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>
          </div>
      </section>
      <section class="background up-scroll">
         <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>
         </div>
      </section>
          <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>
            </div>
          </section>
        </div>

CSS代碼：

@import url(https://fonts.googleapis.com/css?family=Montserrat);

// ------------- MIXINS ------------- //
@mixin transition($time, $property: all, $easing: ease-in) {
    transition: $property $time $easing;
}

// ------------- VARIABLES ------------- //


html, body {
  overflow: hidden;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  height: 130vh !important;
  position: fixed;
  width: 100% !important;
  transform: translateY(30vh);
  @include transition(1.2s, all, cubic-bezier(0.22, 0.44, 0, 1));
}
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
  }
  &:first-child {
    background-image: url(http://emilyhayman.com/codepens/bgd1.jpg);
    transform: translateY(-30vh / 2);
    .content-wrapper {
      transform: translateY(30vh /2);
    }
  }
  &:nth-child(2) {
    background-image: url(http://emilyhayman.com/codepens/photo-1424746219973-8fe3bd07d8e3.jpg);
  }
  .background:nth-child(3) {
    background-image: url(http://emilyhayman.com/codepens/photo-1433840496881-cbd845929862.jpg);
  }
}

/* Set stacking context of slides */
@for $i from 1 to (3 + 1) {
    .background:nth-child(#{$i}) {
        z-index: (3 + 1) - $i;
    }
}

.content {
  &-wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat;
  text-transform: uppercase;
  transform: translateY(40vh);
  will-change: transform;
  backface-visibility: hidden;
  @include transition(1.2s + .5, all, cubic-bezier(0.22, 0.44, 0, 1));
  }
  &-title {
    font-size: 12vh;
    line-height: 1.4;
  }
}

// ------------- SET TRANSFORM VALUES ------------- //

.background.up-scroll {
  transform: translate3d(0,-30vh / 2,0);
  .content-wrapper {
    transform: translateY(30vh / 2);
  }
  + .background {
    transform: translate3d(0,30vh,0);
      .content-wrapper {
        transform: translateY(30vh);
      }
    }
}

.background.down-scroll {
  transform: translate3d(0,-(100vh + 30vh),0);
  .content-wrapper {
    transform: translateY(40vh);
  }
  + .background:not(.down-scroll) {
    transform: translate3d(0,-30vh / 2,0);
      .content-wrapper {
        transform: translateY(30vh / 2);
      }
  }
}

JS代碼：

// ------------- 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");
}
//# sourceURL=pen.js

我只是將這段代碼復制到我的原子編輯器中，並且我將python與Django配合使用，我確定靜態文件或此類文件沒有問題，但是問題是我看不到CSS和JS樣式。 當我看到Inspect Elements時，我看到某些CSS樣式是無效的屬性：

.background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    height: 130vh !important;
    position: fixed;
    width: 100% !important;
    transform: translateY(30vh);
    &: before { content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    } &: first-child { background-image: url(http://emilyhayman.com/codepens/bgd1.jpg);
    transform: translateY(-30vh / 2);
    .content-wrapper { transform: translateY(30vh /2);
    } } &: nth-child(2) { background-image: url(http://emilyhayman.com/codepens/photo-1424746219973-8fe3bd07d8e3.jpg);
    } .background: nth-child(3) { background-image: url(http://emilyhayman.com/codepens/photo-1433840496881-cbd845929862.jpg);
    }: ;
}

問題是在瀏覽器中我看不到css和js效果。 當我打開Inspect元素時，我看到某些css樣式的屬性值錯誤無效並且被忽略（在：before和firt-child和...附近），我使用python和Django，並且我確定靜態文件沒有問題這樣的事情

Answer 1

javascipt的問題是我必須在HTML頁面中添加此行

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

順便說一句，如果您使用的是jQuery，請不要忘記在添加Java腳本之前也添加此行...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>