2

我从http://keithclark.co.uk/articles/pure-css-parallax-websites/学习了使用视差滚动 我尝试使用 Scrollify jQuery 插件捕捉到部分。他们俩都为我工作得很好。但是当我尝试结合这两种效果时，它不起作用。当我滚动浏览几个透明背景部分时，我想要有视差效果。有人可以帮我实现这一目标吗？提前致谢...

<div class="parallax">
<div class="parallax_layer parallax_layer--back">
</div>
<div class="parallax_layer parallax_layer--base">
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
</div>

在上面的代码中，我想在 parallax_layer--base div 中包含滚动效果，以便背景滚动更慢，而前景页面在滚动时捕捉到部分。（视差*类属性在上面提到的链接中定义。）

$(function(){
	  $(".scroller").css({"height":$(window).height()});
	  $.scrollify({
	    section:".scroller",
		scrollbars:false,
	  });
	});
 .parallax {
 perspective-origin-x: 100%;
 perspective: 1px;
 height: 100vh;
 overflow-x: hidden;
 overflow-y: auto;
}
.parallax_layer {
  transform-origin-x: 100%;
  position: absolute;
  top: 0;	bottom: 0;
  left: 0;	right: 0;
}
.parallax_layer--base {
  position: absolute;
  top: 0;	left: 0;
  transform: translateZ(0);
  height: 500vh;
  width: 90%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.parallax_layer--back {
  background-image: url("path/to/image.jpg");
  background-position: center;
  width: 100%;
  transform: translateZ(-10px) scale(11);
}
section{
  width: 100%;
  height: 100vh;
}

.one { background: yellow; }
.two { background: red; }
.three { background: green; }
.four { background: black; }
.five{ background: blue; }
<!doctype html>
<html lang="en">
  
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.4/jquery.scrollify.min.js"></script>
</head>
  
<body>
  <div class="parallax">
    <div class="parallax_layer parallax_layer--back">
	</div>
    <div class="parallax_layer parallax_layer--base">
      <section class="scroller one"></section>
      <section class="scroller two"></section>
      <section class="scroller three"></section>
      <section class="scroller four"></section>
      <section class="scroller five"></section>
    </div>
  </div>
</body>
</html>

4

0 回答 0