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

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

html css

Html 如何在不使用背景图像的情况下创建视差效果？,html,css,parallax,Html,Css,Parallax,我试图创建一个视差效果，而不使用背景图像和背景附件：固定的，因为背景附件：固定的在iOS上效果不太好。以下是我的想法： HTML 现在我被困在图像上，滚动来做视差效果。我已尝试将图像设置为固定位置，但这样做时图像不再显示。如何使这张图像具有视差效果？不幸的是，我不知道使用纯CSS的任何可靠方法。原因是无法获取当前滚动位置（我们可以在calc（）中使用）。此外，当使用fixed定位一个元素时，它不再关心它的父元素，并且不可能强制执行溢出：hidden 有两种方法可以在不使用背景的情况下创建para

我试图创建一个视差效果，而不使用

背景图像和背景附件：固定的，因为背景附件：固定的在iOS上效果不太好。以下是我的想法：
HTML
现在我被困在图像上，滚动来做视差效果。我已尝试将图像设置为固定位置，但这样做时图像不再显示。如何使这张图像具有视差效果？
不幸的是，我不知道使用纯CSS的任何可靠方法。原因是无法获取当前滚动位置（我们可以在calc（）
中使用）。此外，当使用fixed
定位一个元素时，它不再关心它的父元素，并且不可能强制执行溢出：hidden

有两种方法可以在不使用背景的情况下创建paralax效果，一种是使用JavaScript，我已经给了您一个完整的工作示例。这是最低限度的，可能会使浏览器的工作方式太多，没有什么，但它的工作。您当然希望优化它，使其仅适用于有很多元素时可见的元素

$（文档）.ready（函数（）{
var onScroll=函数（）{
var scrollTop=$（this.scrollTop（）；
$（'.paralax image'）。每个（函数（索引，元素）{
变量$elem=$（elem）；
$elem.find（'img'）.css（'top'，scrollTop-$elem.offset（）.top）；
});
};
onScroll.apply（窗口）；
$（窗口）.on（'scroll'，onScroll）；
});
.content{
高度：500px；
}
.paralax图像{
溢出：隐藏；
高度：200px；
位置：相对位置；
}
.paralax图像img{
位置：绝对位置；
高度：100vh；
最小宽度：100%；
}

乱数假文
您实际上可以制作纯CSS视差效果，而无需背景图像
或背景附件
。基思·克拉克有一个伟大的梦想。为了这个例子，我将借用他的代码：
HTML
这实际上是一个非常简单的解决方案，但可能需要一秒钟的时间来理解这一切是如何发生的。这里发生的一件大事是变换：translateZ（-1px）比例（2）
，它将
沿z轴向后移动，并将其调整为正常大小。设置z轴是控制视差速度的方式。所以translateZ（-1px）
比translateZ（-2px）
慢
现在div已沿z轴向后移动，需要将其大小调整回正常大小。为此，只需将scale
添加到transform
属性中。必须使用1+（translateZ*-1）/perspective
计算比例。因此transform:translateZ（-10px）
应该是transform:translateZ（-2px）比例（3）
假设将透视图设置为1px

然后，.parallax
容器的透视图
更改为1px
，该容器将
透视图设置为中心。添加overflow-y:auto
允许内容正常滚动，但子元素将呈现到固定透视图
因为这只使用了
和CSS，所以您应该能够在没有JS的情况下解决您的问题。您可以轻松地将图像放在div中。这是一个仅显示单个视差效果的。如果您查看源代码，除了Google Analytics部分，您不会看到任何JavaScript。有很多不同的部分
我建议您阅读，因为代码应该做您想做的一切。此外，它还可以在iOS、Safari、Chrome和FF上完美运行。我已经用过很多次了，但我推荐的方法还不够。不用说，我从那篇教程中借用了很多答案，因此这篇伟大的文章要归功于Keith Clark。
无论出于什么原因，这篇文章似乎对我最有效：

需要在页面的页眉中使用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>


.视差{
高度：400px；
宽度：100%；
背景图片：url（“SOMEBGIMAGE.jpg”）；
背景位置y:0%；
背景重复：无重复；
背景尺寸：封面；
}
$（窗口）。滚动（函数（）{
var y=0；
var scroll=$（窗口）.scrollTop（）；
var win=$（窗口）.height（）
变量高度=$（“.parallax”）.height（）；
var offset=$（“.parallax”）.offset（）.top；
y=（（100*滚动）/（高度+胜利））+（（100*（胜利-偏移））/（高度+胜利））；
如果（y>100）{y=100；}
如果（y<0）{y=0；}
var out=字符串（y）+“%”；
$（“.parallax”）.css（“background-position-y”，out）；
});
纯CSS解决方案：将容器填充设置为视差高度（例如100vh），然后将固定/绝对子对象（视差区域）放置在其中。使用z-index来实现视差滚动效果。为我工作：）
伟大的解决方案推销员！我会推荐类似的东西。这里有一些我发现的视差效果的好例子：你是对的，这些很好。我在这里选择了最简单的效果，主要是因为很多效果需要大量的代码和良好的理解才能将所有内容组合在一起。另外，我不得不说，因为我不明白CSS如何只在那个页面上工作…：）@Salketer抱歉，我的编辑未经您的许可而被批准，我在这里添加了一个小更改。paralax图像img{位置：绝对；高度：100vh；宽度：100%；}
，对于较小的图像，窗口未设置为最大大小，我想这是必需的，如果需要，请恢复此更改，我唯一的更改是宽度：100%@NarenMurali感谢您的添加！我把它改成了min width，这样我们就可以保持比率约束，如果它大于100%！这个答案是对的
.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

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

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

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