如何在不使用背景图像的情况下创建视差效果? [英] How do I create a parallax effect without using a background-image?

问题描述

我试图在不使用 background-image 和 background-attachment:fixed 的情况下创建视差效果，如 background-attachment:fixed在 iOS 上不太好用.这是我想出的:

HTML

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

</文章>

CSS

.twentyseventeen-panel {溢出:隐藏；位置:相对；}.面板图像{位置:相对；高度:100vh；最大高度:200px；}

现在我被困在图像滚动以实现视差效果.我曾尝试将图像设置为 fixed 位置，但是当我这样做时，我的图像不再出现.如何让这张图片产生视差效果?

解决方案

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

有两种方法可以在不使用背景的情况下创建视差效果，一种是使用 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 {高度:500px；}.视差图像{溢出:隐藏；高度:200px；位置:相对；}.视差图像 img {位置:绝对；高度:100vh；最小宽度:100%；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="内容"><h2>Lorem Ipsum</h2><div class="视差图像"><img src="http://placehold.it/400x200">

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

/* 不能再使用边距了... */h1{边距:0；填充:0.67em 0；}p{边距:0；填充:1em 0 0；}身体 {边距:0；}.container>* {背景颜色:白色；}.视差{z-索引:-2；高度:100vh；位置:固定；顶部:0；}.视差图像{背景:透明；高度:200px；}

<img class="paralaxed" src="http://placehold.it/400x200"><h1>我的标题在这里</h1><div class="paralax-image"></div><p>逻辑推理...</p><p>逻辑推理...</p><p>逻辑推理...</p><p>逻辑推理...</p><p>逻辑推理...</p>

I am trying to create a parallax effect without using background-image with background-attachment: fixed, as background-attachment: fixed doesn't work on iOS so well. Here's what I came up with:

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

Now I am stuck on getting to image to scroll to do the parallax effect. I have tried setting the image to a fixed position, but my image no longer appears when I do that. How do I get this image to have a parallax effect?

解决方案

Unfortunately, I do not know of any sure fire way using pure CSS. The reason for it is because there is no way to get the current scroll position (which we could be using in a calc()). Also, when positioning an element using fixed, it does not care about its parent anymore and it becomes impossible to enforce an overflow:hidden.

There are two ways of creating a paralax effect without using background, is to either make use of JavaScript, I've given you a full working example. It is minimal, might make the browser work way too much for nothing, but it works. You'll certainly want to optimize it to only apply on elements that are visible if you have a lot.

$(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://placehold.it/400x200">
  </div>


</div>

Now for the full CSS part... It is a bit complexe to implement and cannot be done for every kind of layout. The trick would be to have your image(s) using a position:fixed rule. But instead of unsuccessfully relying on overflow:hidden, you would have them at the lowest z-index, have all your elements with a background and create "holes" where you want to display the image. This will create a lot of problems when adding backgrounds, you'd have to make multiple different elements to make sure you have always a possibility to display the paralax image. I've tried to demonstrate how this could be achieved, without creating a too complexe example. This technique will only work for 1 image. If you want it to work with multiple images, you'd have to use javascript to switch visibility accordingly, and only 1 paralax effect visible at a time.

/* 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://placehold.it/400x200">
  <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>

这篇关于如何在不使用背景图像的情况下创建视差效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！