Как создать эффект параллакса без использования фонового изображения?

Я пытаюсь создать эффект параллакса без использования 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, но мое изображение больше не появляется, когда я это делаю. Как получить этот эффект для эффекта параллакса?

Ответ 1

К сожалению, я не знаю какого-либо уверенного пути, используя чистый 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 {
  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>

Ответ 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>. Если вы посмотрите на исходный код, вы не увидите JavaScript, кроме части для Google Analytics. Вот демо с тоннами различных разделов.

Я рекомендую вам читать этот учебник, поскольку код должен делать все, что вы хотите. Плюс он работает безупречно на iOS, Safari, Chrome и FF. Я использовал его несколько раз, и я не могу рекомендовать этот метод достаточно. Излишне говорить, что я заимствовал большую часть своего ответа из этого учебника, поэтому реквизит Кейт Кларк за отличную запись.