javascript - Full page parallax scroll effect for a web page

问题描述

I was creating a web page and I copied a code from codepen and I got problem...

HTML code:

<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 code:

@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 code:

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

I just copied this code into my atom editor and I'm using python with Django I'm sure there is no problem with static files or something of this kind but the problem is that I cannot see css and js styles. and when I see Inspect Elements I see that some css styles are invalid property:

.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);
    }: ;
}

The problem is that in browser I cannot see css and js effects. when I open Inspect element I see that some css styles got invalid property value error and they are ignored (near :before and firt-child and ...) I use python and Django and I'm sure there is no problem with static files and this kind of things...

标签： javascriptcssscrollparallaxeffect

javascript - Full page parallax scroll effect for a web page

问题描述

解决方案

推荐阅读