Блог

Главная - Вопросы по программированию - Параллакс исчезает без jquery

Параллакс исчезает без jquery

#javascript #html #css #parallax

#javascript #HTML #css #параллакс

Вопрос:

Я пытаюсь создать веб-сайт с параллаксной прокруткой. У меня есть базовый код, но я хочу, чтобы изображения исчезали при прокрутке вниз до следующего изображения и исчезали, когда оно появляется на экране. Я использую чистый HTML и CSS, без плагинов. Как мне это сделать? Вот мой код: 

 #divname {
    background-image: url('http://lorempixel.com/1024/600/abstract/');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
    width: 100vw;
	height: auto;
	background-attachment: fixed;
}

.text {
	background-color: rgba(255, 255, 255, 0.75);
}

.header {
	font-size: 10vw;
}  
 		<div id="divname">
                <div class="text">
				<p class="header">Headername</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
			</div>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

PS: Кстати, я в порядке с использованием javascript, но я бы предпочел не использовать jQuery.

Ответ №1:

Не уверен, что это то, чего вы хотите, но вам нужно отделить ваши изображения от других текстов, иначе все ваши #divaname будут исчезать при прокрутке.

 var myDiv = document.getElementById('divname');

function scrolled() {
    
    if (window.pageYOffset < 100) {
        myDiv.style.opacity = 1;
    } else {
        myDiv.style.opacity = 0.3;
    }
}

window.addEventListener('scroll', scrolled);  
 #divname {
    background-image: url('http://lorempixel.com/1024/600/abstract/');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
    width: 100vw;
	height: auto;
	background-attachment: fixed;
    transition: opacity 1s ease;
}

.text {
	background-color: rgba(255, 255, 255, 0.75);
}

.header {
	font-size: 10vw;
}  
     <div id="divname">
                <div class="text">
				<p class="header">Headername</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis dictum mi ac euismod. Aenean fermentum nisl ut lorem cursus, in consectetur est eleifend.</p>
			</div>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Комментарии:

1. Спасибо, есть ли способ заставить его полностью исчезать только тогда, когда он полностью отображается на экране, без необходимости проб и ошибок, чтобы найти правильное смещение y?

2. Вам нужно выполнять трассировку и ошибку каждый раз при прокрутке, чтобы проверить текущее смещение Y, иначе оно будет исчезать, даже если вы вернетесь к началу. Если вы этого хотите, просто удалите else условие.