[CSS] Эффект параллакса и фиксированный текст - PullRequest
Новая
       5

[CSS] Эффект параллакса и фиксированный текст

0 голосов
/ 06 ноября 2018

Я столкнулся с проблемой, пытаясь использовать эффект параллакса после w3school "tutorial"

Мне нужно фоновое изображение с заголовком текста, и при прокрутке вниз следующая панель будет поверх фонового изображения и заголовка.

Я пытался безуспешно, пока заголовок исправлен, но не покрывается следующей панелью, подобной этой:

Скриншот

Я пытался использовать z-index во всех разделах, но не могу заставить его работать.

У вас есть представление о том, что не так?

КОД: 

.banner-section{
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4c/Banksy_lovers.jpg');
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

p.wanted-name {
	position: fixed;
	margin-left: 35%;
	top:15%;
	pointer-events: none;
	font-family: wanted;
	color:#eeeeee;
	font-size: 12vw;
}

.intro-section {
	padding:100px;
	background-color: white;
	box-shadow: 0 -4px 8px #4d4d4d;
}

.intro-text {
	padding-top: 70px;
}

.intro-text p {
	margin-bottom: 100px;
	text-align: justify;
}

.sub-title{
	color: #868686;
	font-size: 12px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.sp-title {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 45px;
	letter-spacing: 6px;
}

.button-wanted {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 20px;
	text-transform: uppercase;
	color: black;
	font-size: 14px;
}

.button-wanted:link{
	color:black;
}
	<body><!-- Banner section start -->	
	<div class="banner-section">
		<p class="wanted-name">Wanted</p>
	</div> 
	<!-- End of banner section-->	

	<!-- First hint section -->
	<div class="intro-section">
		<div class="container-fluid">
			<div class="row">

		<div class="col-xl-4 intro-text">
		<span class="sub-title">Wanted agency</span>
		<h3 class="sp-title">Simply the best</h3>
		<p>Integer nec bibendum lacus. Suspendisse dictum enim sit amet libero malesuada feugiat. Praesent malesuada congue magna at finibus. In hac habitasse platea dictumst. Curabitur rhoncus auctor eleifend. Fusce venenatis diam urna, eu pharetra arcu varius ac. Etiam cursus turpis lectus, id iaculis risus tempor id.</p>
		<a href="about.html" class="button-wanted">Read More</a>
		</div>

		<div class="col-xl-7 offset-xl-1">
		<img src="https://fr.wikipedia.org/wiki/Banksy#/media/File:Banksy_lovers.jpg" alt="">
		</div>
	</div>
	</div>
	</div>
  </body>

Я никогда раньше не использовал фрагмент кода, извините, если я сделал это неправильно.

Спасибо.

С уважением,

Unic0

1 Ответ

0 голосов
/ 06 ноября 2018

Причина, по которой вы не используете z-index, заключается в том, что ваш intro-section div не относительно позиционирован.

Изменить следующее: 

.intro-section {
    padding:100px;
    background-color: white;
    box-shadow: 0 -4px 8px #4d4d4d;
    position: relative;
}

z-index будет работать только с элементом, для которого для свойства position явно установлено абсолютное, фиксированное или относительное значение - SOURCE

Кроме того, с текстом, как правило, вы не хотите использовать поле для центрирования текста, так как это вызовет проблемы при использовании браузеров разных размеров (отзывчивость). Вместо этого измените wanted-name на следующее: 

p.wanted-name {
    position: fixed;
    top: 15%;
    pointer-events: none;
    font-family: wanted;
    color: #eeeeee;
    font-size: 12vw;
    left: 0;
    right: 0;
    text-align: center;
}
...