Question

探索网络，我在这个网站上发现了这种惊人的效果http://www.guglieri.com/ （滚动效果）我想构建一个重新创建相同效果的脚本，但我不理解逻辑行为。

基本上，我开始计算身高，将每个部分的位置属性设置为“绝对”，并将身体的高度与每个部分的高度相加。

现在，我的想法是将每个的偏移保存到数组中，当scrolltop为major或等于此偏移时......我开始通过translateY属性移动到顶部，并且当它是等于视口的高度。但现在我被困了!!

我用谷歌搜索了一个已经存在的插件，但我没有找到任何东西。所以请帮我找到解决方案;）

这里的概念：

var
  body = $('body')
  section = $('section');
section.each(function(i,el){
  $(el).css({
    'z-index' : section.length - i
  })
  body.height(body.height()+$(el).height());
});

body {
  margin: 0;
}
section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  font-family: sans-serif;
}
section.a {
  background-color:indianred
}
section.b {
  background-color:royalblue
}
section.c {
  background-color:deepskyblue
}
section.d {
  background-color:tomato;
}

section div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  font-size: 6em;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<section class="a">
  <div>a</div>
</section>
<section class="b">
  <div>b</div>
</section>
<section class="c">
  <div>c</div>
</section>
<section class="d">
  <div>d</div>
</section>

Answer 1

这是视差效应。

这是一个简单的视差脚本：http://pixelcog.github.io/parallax.js/

网上还有其他更多脚本，还有关于如何根据需要制作自己的视差效果的教程。

Answer 2

您可以在w3schools

上了解视差效果的基础知识

Answer 3

你可以尝试pagePiling.js，但区别在于这个使用自动滚动。

使用offset:100选项autoScrolling:false import sys import traceback from org.apache.nifi.processor.io import OutputStreamCallback from org.python.core.util import StringUtil class WriteContentCallback(OutputStreamCallback): def __init__(self, content): self.content_text = content def process(self, outputStream): try: outputStream.write(StringUtil.toBytes(self.content_text)) except: traceback.print_exc(file=sys.stdout) raise # Create new FlowFile with content flowFile = session.create() flowFile = session.write(flowFile, WriteContentCallback("This is the flowfile content")) session.transfer(flowFile, REL_SUCCESS)可以达到类似的效果。

滚动固定部分

3 个答案: