如何在不使用背景图像的情况下创建视差效果？

Question

我想不使用创建的视差效果background-image有background-attachment: fixed,因为background-attachment: fixed没有在iOS上工作这么好.这是我想出的:

HTML

<article class="twentyseventeen-panel">
  <div class="panel-image">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
      <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
    </div>
  </div>
</article>

CSS

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

现在我不得不去图像滚动来做视差效果.我尝试将图像设置到某个fixed位置,但是当我这样做时,我的图像不再显示.如何让此图像具有视差效果？

Answer 1

不幸的是,我不知道使用纯CSS的确定方法.原因是因为无法获得当前滚动位置(我们可以在a中使用calc()).此外,当使用元素定位元素时fixed,它不再关心它的父元素,也不可能强制执行元素overflow:hidden.

有两种方法可以在不使用背景的情况下创建一个paralax效果,就是要使用JavaScript,我已经给你一个完整的工作示例.它是最小的,可能会使浏览器无所事事地工作,但它的工作原理.您当然希望将其优化为仅应用于可见的元素(如果您有很多).

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.paralax-image').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);
});

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h2>Lorem Ipsum</h2>
  <div class="paralax-image">
    <img src="http://lorempixel.com/400/200">
  </div>


</div>

现在对于完整的CSS部分......实现起来有点复杂,并且无法针对各种布局进行.诀窍是让您的图像使用position:fixed规则.但是,不是没有成功依赖overflow:hidden,而是让它们处于最低的z-index,让所有元素都具有背景,并在想要显示图像的位置创建"洞".添加背景时会产生很多问题,你必须制作多个不同的元素,以确保始终有可能显示paralax图像.我试图证明如何实现这一点,而不是创建一个过于复杂的例子.此技术仅适用于1张图像.如果您希望它能够处理多个图像,则必须使用javascript来相应地切换可见性,并且一次只能看到1个视差效果.

/* Can't use margins no more... */

h1 {
  margin: 0;
  padding: 0.67em 0;
}

p {
  margin: 0;
  padding: 1em 0 0;
}

body {
  margin: 0;
}

.container>* {
  background-color: white;
}

.paralaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.paralax-image {
  background: transparent;
  height: 200px;
}

<div class="container">
  <img class="paralaxed" src="http://lorempixel.com/400/200">
  <h1>My Title here</h1>
  <div class="paralax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>

Answer 2

实际上，您可以制作纯CSS视差效果，而无需使用background-image或background-attachment。基思•克拉克（Keith Clark）的写作和教程很棒。为了示例，我将借用他的代码：

的HTML

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

的CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

实际上，这是一个非常简单的解决方案，但可能需要一秒钟的时间来了解所有情况。发生的最大事情是transform: translateZ(-1px) scale(2)，它会<div>沿z轴移回并调整其大小以恢复正常。设置z轴是控制视差速度的方式。因此translateZ(-1px)比慢translateZ(-2px)。

现在，div已沿z轴移回，需要将其调整为正常大小。为此，您只需添加scale到transform属性。必须使用来计算比例1 + (translateZ * -1) / perspective。因此，transform: translateZ(-10px)应transform: translateZ(-2px) scale(3)假设您将perspective设置保留为1px。

然后perspective将更改为1px，将.parallax容器设置<div>为中心。添加overflow-y: auto允许内容正常滚动，但是后代元素将呈现为固定的透视图。

由于这只是使用<div>的和CSS，你应该能够在不JS解决您的问题。您可以轻松地将图像放置在div中。这是一个简单的演示，仅显示单个<div>视差效果。如果您查看源代码，除了Google Analytics（分析）部分以外，您将看不到任何JavaScript。这是一个包含大量不同部分的演示。

我建议您阅读本教程，因为代码应该可以完成您想做的所有事情。另外，它可以在iOS，Safari，Chrome和FF上完美运行。我已经使用过很多次了，我不能推荐足够的方法。不用说，我从该教程中借鉴了很多答案，因此请Keith Clark撰写出色的文章作为道具。