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的确定方法。原因是因为无法获得当前滚动位置（我们可以在calc()中使用）。此外，使用fixed定位元素时，它不再关心其父元素，也无法强制执行overflow:hidden。

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

＆＃13;

$(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);
});

＆＃13;

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}

＆＃13;

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

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

您实际上可以制作纯CSS视差效果而无需background-image或background-attachment。凯斯克拉克有一个伟大的write up & tutorial on it。为了这个例子，我将借用他的代码：

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>允许内容正常滚动，但后代元素将呈现为固定透视图。

由于这仅使用<div>和 CSS ，因此您应该能够在没有JS的情况下解决您的问题。您可以轻松地将图像放在div中。这是simple demo，只显示一个Module module = com.foo.bar.YourClass.class.getModule();视差效果。如果您查看源代码，除了Google Analytics的部分外，您将看不到任何JavaScript。 Here's a demo有很多不同的部分。

我建议你阅读this tutorial，因为代码应该做你想做的一切。此外，它在iOS，Safari，Chrome和＆amp ;; FF。我已经使用了很多次了，我不能推荐这种方法。毋庸置疑，我从该教程中借用了我的大部分答案，因此为Keith Clark提供了很好的写作道具。

Answer 3

无论出于何种原因，这对我来说似乎最有效：

https://github.com/deggenschwiler/jquery_parallax

页面标题中需要jQuery：

<html>
<head>
    <style>
      .parallax {
        height: 400px;
        width: 100%;
        background-image: url("SOMEBGIMAGE.jpg");
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>
    $(window).scroll(function() {
          var y = 0;
          var scroll = $(window).scrollTop();
          var win = $(window).height()
          var height = $(".parallax").height();
          var offset = $(".parallax").offset().top;
          y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
          if (y > 100){y = 100;}
          else if (y < 0){y = 0;}
          var out = String(y) + "%";
          $(".parallax").css("background-position-y", out);
    });
    </script>
</head>
<body>
    <div class="parallax">
    </div>
</body>
</html>

Answer 4

纯CSS变通办法：将容器填充设置为视差的高度（例如100vh），然后将其位置固定/固定在子位置（视差区域）。使用z-index来实现视差滚动效果。为我工作：）

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

HTML

CSS

4 个答案:

HTML

CSS