Ошибка видимости задней поверхности в Firefox / IE (пользовательский интерфейс с прокруткой, например, Life Socks)

html css

166 просмотра

1 ответ

Я был заинтригован функциональностью 'wiping scroll' в http://lifesocks.me/ (которая использует JS и Skrollr) и хотел попробовать сделать это только с помощью CSS, не угоняя собственную прокрутку.

Мне удалось пройти почти 90% пути: http://codepen.io/iamkeir/pen/yJKJNG

html, body { height: 100%; }
a { color: white; }
a:hover { text-decoration: none; }

.slide {
  height: 100vh;
  position: relative;
  z-index: 1;
  font-size: 10vw;
  color: white;
  text-align: center;    
  overflow: hidden;
  backface-visibility: hidden;
}

.slide__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}

.slide--1 { background: red; }
.slide--2 { background: blue; }
.slide--3 { background: green; }
.slide--4 { background: grey; }
<div class="slide slide--1">
  <div class="slide__inner"><a href="#test-1">Slide 1</a></div>
</div>

<div class="slide slide--2">
  <div class="slide__inner"><a href="#test-2">Slide 2</a></div>
</div>

<div class="slide slide--3">
  <div class="slide__inner"><a href="#test-3">Slide 3</a></div>
</div>

<div class="slide slide--4">
  <div class="slide__inner"><a href="#test-4">Slide 4</a></div>
</div>

Осталось две проблемы:

1) Кажется, трюк видимости задней поверхности не работает в Firefox или IE11 / Edge, но я не уверен, почему.

2) Из-за стека z-index вы не можете взаимодействовать с текстом / ссылками на предыдущих слайдах, так как последний слайд по сути «сверху».

Что касается 2, я попытался использовать JS, чтобы вывести «текущий» слайд на вершину стека z-index, но это неуклюже - когда слайд «текущий», когда он находится на полпути вверх?

Было бы здорово узнать мнение других об ошибке в 1 и любых идеях для 2.

РЕДАКТИРОВАТЬ

Вот кодекс функциональности JS 'focus' - как я уже сказал, неуклюжий! http://codepen.io/iamkeir/pen/akxRwj

Автор: iamkeir Источник Размещён: 08.11.2019 11:20

Ответы (1)


1 плюс

Решение

Для меня «трюк» с видимостью задней поверхности звучит как ошибка Chrome / Webkit. overflow: hiddenне должен применяться к элементам, чей блок находится вне overflow: hiddenэлемента.

Эффект, который вы ищете, может быть достигнут с помощью clipсвойства. clipСвойство применяется ко всем потомкам, не только содержащий блок потомков. Смотрите эту страницу BBC для примера.

К сожалению, поскольку clipсвойство применяется только к position: absoluteэлементам, вам нужно три элемента на слайде. Вот как вы это делаете:

body { margin: 0; }
a { color: white; }
a:hover { text-decoration: none; }

.slide {
  height: 100vh;
  position: relative;
  font-size: 10vw;
  color: white;
  text-align: center;
}

.slide__wrapper {
  position: absolute;
  clip: rect(auto auto auto auto);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide--1 { background: red; }
.slide--2 { background: blue; }
.slide--3 { background: green; }
.slide--4 { background: grey; }
<div class="slide slide--1">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-1">Slide 1</a></div></div>
</div>

<div class="slide slide--2">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-2">Slide 2</a></div></div>
</div>

<div class="slide slide--3">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-3">Slide 3</a></div></div>
</div>

<div class="slide slide--4">
  <div class="slide__wrapper"><div class="slide__inner"><a href="#test-4">Slide 4</a></div></div>
</div>

Автор: Markus Stange Размещён: 21.08.2016 05:01
Вопросы из категории :
32x32