Question

我从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中包含scrollify效果，这样背景滚动得更慢，前景页面在滚动时捕捉到各个部分。（parallax * class属性在上面提到的链接中定义。）

＆＃13;

$(function(){
	  $(".scroller").css({"height":$(window).height()});
	  $.scrollify({
	    section:".scroller",
		scrollbars:false,
	  });
	});

＆＃13;

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

＆＃13;

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

＆＃13;

将视差滚动与滚动相结合

0 个答案: