Почему пропадает параллакс у картинки при использовании свойства transform?

Question

[cazumbra]

Добрый день.

Кто-нибудь знает как эффект параллакса связан с CSS-свойством transform. В Гутенберге выбрал блок Обложка, зафиксировал фон. Мне нужно было чтобы этот блок занял 100% ширины блока контента, при этом фиксированной ширины у него нет. Использовал JS

function resize() {
    $('.alignfull').width($('.overlay').width() - 1)
}
resize();
$( window ).resize(function() {
    resize()
});

где .alignfull - это селектор картинки с параллаксом, а .overlay - это селектор блока по ширине которого изменяет размер картинка. Картинка конечно не встала ровно в блок, но приобрела нужную мне ширину. Самый простой метод выравнить картинку в аккурат от края до края - это такие css

.alignfull {
    margin-left: 50%;
    transform: translateX(-50%);
}

Однако со свойством transform у картинки пропадает параллаксность) Как победить проблему?

Answer 1

[cazumbra]

Короче, может есть еще шизики кроме меня, но я нашел в чем проблема. Что в Гугл Хром, что в Файрфокс наблюдается баг, при котором если задать элементу transform через css, то будут проблемы с позиционированием его на странице. В огнелисе элемент растянется, но пропадет параллакс эффект (заданный свойством background-attachment: fixed; ), а в хроме картинка сместится в сторону на половину страницы. Победить эту ситуацию можно если обернуть растянутый блок в див. Чтобы этого в ручную не делать, можно вставить вот такую конструкцию в functions.php

function zm_wrap_alignment( $block_content, $block ) {
	if ( isset( $block['attrs']['align'] ) && in_array( $block['attrs']['align'], array( 'wide', 'full' ) ) ) {
		$block_content = sprintf(
			'<div class="%1$s">%2$s</div>',
			'align-wrap align-wrap-' . esc_attr( $block['attrs']['align'] ),
			$block_content
		);
	}
	return $block_content;
}
add_filter( 'render_block', 'zm_wrap_alignment', 10, 2 );

Тогда все блоки в Гутенберге, которые поддерживают свойства alignwide и alignfull встанут внутри дива align-wrap. Дальше мы задаем css свойства

.align-wrap {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.align-wrap .alignfull {
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
}

При этом, если ширина блока .align-wrap .alignfull неизвестна, то можно также как я использовать скрипт подгона ширины одного элемента под другой (в моем вопросе выше это есть)

function resize() {
    $('.alignfull').width($('.overlay').width() - 1)
}
resize();
$( window ).resize(function() {
    resize()
});

Теперь и параллакс и нормальное выравнивание будет работать и в Гугле и в Мозилле. Такая штука подойдет тем, у кого контент сайта находится внутри бокса, то есть ограничен рамками, которые отступают от границ viewbox.

Answer 2

[Юпитер Макс]

у одного элемента нельзя писать несколько

transform:rotate(x,y);
transform:scale(0,0);

нужно писать в одной строке несколько свойств

transform: scale(1.5) rotate(-10deg);

соответственно у вас получается как в первом примере, вот и не работает. Так как одно свойство переписывает другое.

Comments

[cazumbra]

А где второе свойство transform прописано? для изображения с параллаксом оно каким-то образом необходимо?