Я пытаюсь создать эффект параллакса без использования 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
, но мое изображение больше не появляется, когда я это делаю. Как сделать так, чтобы это изображение имело эффект параллакса?
3 ответа
К сожалению, я не знаю ни одного верного пути использования чистого 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://placehold.it/400x200">
</div>
</div>
Теперь для полной части CSS ... Это немного сложно реализовать и не может быть сделано для любого вида макета. Хитрость заключается в том, чтобы иметь ваши изображения, используя правило position:fixed
. Но вместо того, чтобы безуспешно полагаться на overflow:hidden
, вы бы имели их с самым низким z-индексом, все ваши элементы имели фон и создавали «дыры» там, где вы хотите отобразить изображение. Это создаст много проблем при добавлении фона, вам нужно будет создать несколько разных элементов, чтобы у вас всегда была возможность отобразить изображение паралакса. Я пытался продемонстрировать, как этого можно достичь, не создавая слишком сложный пример. Эта техника будет работать только для 1 изображения. Если вы хотите, чтобы он работал с несколькими изображениями, вам придется использовать javascript, чтобы соответственно изменить видимость, и одновременно будет виден только 1 эффект паралакса.
/* 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>
По какой-то причине это, кажется, сработало лучше для меня:
https://github.com/deggenschwiler/jquery_parallax
Требуется jQuery в заголовке страницы:
<html>
<head>
<style>
.parallax {
height: 400px;
width: 100%;
background-image: url("SOMEBGIMAGE.jpg");
background-position-y: 0%;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
var y = 0;
var scroll = $(window).scrollTop();
var win = $(window).height()
var height = $(".parallax").height();
var offset = $(".parallax").offset().top;
y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
if (y > 100){y = 100;}
else if (y < 0){y = 0;}
var out = String(y) + "%";
$(".parallax").css("background-position-y", out);
});
</script>
</head>
<body>
<div class="parallax">
</div>
</body>
</html>
Чистый CSS-обходной путь: установите для отступа контейнера высоту параллакса (например, 100vh), затем установите фиксированное / абсолютное значение дочернего элемента (области параллакса) в нем. Поиграйте с z-index, чтобы добиться эффекта прокрутки параллакса. Работал для меня :)
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].