Skrollr: исчезающее изображение прыгает вверх по z-индексу

У меня есть некоторые изображения, которые нормально прокручиваются, а некоторые накладывающиеся элементы div создают эффект маски. Он отлично работает, но я хочу, чтобы прокручиваемые изображения исчезали. Как только я добавляю анимацию непрозрачности, исчезающее изображение перескакивает на вершину стека z-индекса, пока не достигнет непрозрачности: 1, а затем возвращается к своему нормальному z-индексу. Вот обсуждаемая страница.

Три треугольных фигуры, маскирующие изображения, относятся к столбцу навигации с фиксированным положением, который находится за пределами #skrollr-body (как рекомендуется).

<div class="tri6"></div>
<div class="tri7"></div>
<div class="tri8"></div>

и они расположены над правым столбцом, где находятся прокручиваемые изображения.

<div class="page_photo" data-400="opacity: 0;" data-700="opacity: 1;">
<img src="photos/fight1.jpg">
<img src="photos/neutron4.jpg">
<img src="photos/indi.jpg">
<img src="photos/taxi.jpg">
<img src="photos/planet1.jpg">
</div>

Я установил z-индекс изображения на -1 и div маски на 500, но это не решение. Не знаете, как поступить - есть советы?

чтобы уточнить: посетите связанный сайт, прокрутите вниз. вы увидите большое изображение дерущегося парня. При прокрутке этого изображения появятся 3 белых треугольника. Они всегда должны быть сверху, а не позади анимационного эффекта непрозрачности.


javascript html css skrollr
person RiquezJP    schedule 18.07.2015    source источник
comment
Это, кажется, не имеет никакого эффекта. Я отредактировал верхний левый треугольник на position:relative и сделал его ярко-красным, чтобы мы могли ясно видеть, что происходит. Прокручивающееся изображение, которое исчезает, проходит над красным треугольником, а затем красный треугольник перемещается вперед, когда исчезновение завершено. riquez.neocities.org/d4damage/index.html   -  person RiquezJP    schedule 23.07.2015
comment
Я думаю, что понял, разместил свой ответ ниже.   -  person Christian    schedule 24.07.2015

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я думаю, я понял. Проблема в том, что к контейнеру треугольника не применяется z-индекс.

Попробуйте изменить стиль div col1 на это:

.col1 {
float: left;
width: 20%;
min-width: 12em;
padding-top: 1em;
position: relative;
z-index: 9999;
}

Дайте мне знать, если это сработает.

person Christian    schedule 24.07.2015
comment
Очень хороший. Полностью проблему не решает, но почти решает. Z-индексация работает, чтобы сохранить эти треугольники впереди, но кажется, что треугольники также наследуют эффект затухания просто потому, что они находятся над вершиной затухания. Спасибо. Я думаю, что здесь было, вероятно, 2 проблемы, и вы решили одну из них. :-) - person RiquezJP; 25.07.2015
comment
Рад, что решил одну из проблем. Разве вы не хотите, чтобы треугольники исчезли? Если нет, вам просто нужно изменить атрибуты данных следующим образом: ‹div class=tri6 data-400=opacity: 1; data-700=opacity: 1;›‹/div› Чтобы он оставался непрозрачным. - person Christian; 25.07.2015
comment
Идеальный! На самом деле, это исчезновение полностью моя вина. Анимации данных tri6 быть не должно. Я думаю, что добавил это как часть устранения неполадок - oOps! - значит, ваш первый ответ был абсолютно правильным - спасибо! - person RiquezJP; 26.07.2015