картинка паралакса не становиться фоном - JavaScript, Ajax

дмитрий75 · 15.09.2020, 00:21

нашел параллакс эффект , но проблема что нужно чтобы фиксировался как фон

Код:


<body>
   <div class="mouse-parallax">
    <div class="mouse-parallax-bg"></div>
   </div>
</body>

Код:

    .mouse-parallax {
    margin: 0;
    padding: 0;
    height: 700px;
    position: fixed;
    position: relative;
    overflow: hidden;
}
.mouse-parallax-bg {
    position: absolute;
    background-image: url("../img/priroda.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 150%;
    height: 150%;
    transition: all 0.1s ease;  
}

Код:

    let bg = document.querySelector('.mouse-parallax-bg');
window.addEventListener('mousemove', function(e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;  
    bg.style.transform = 'translate(-' + x * 250 + 'px, -' + y * 250 + 'px)';
});

по какойто причине не могу в css поставить высоту блока с картинкой в процентах = 100% и зафиксировать чтоб непрокручивалась, может что добавить в js? и при изменении размера браузера пропорции неменяються\

дмитрий75 · 15.09.2020, 02:07

вместо указания высоты в процентах

Код:

height: 100%;

нужно было написать

Код:

height: 100vh;

непойму точно почему ,но заработало)

15.09.2020, 00:21	#1
дмитрий75 Новичок Джуниор Регистрация: 15.09.2020 Сообщений: 2	картинка паралакса не становиться фоном нашел параллакс эффект , но проблема что нужно чтобы фиксировался как фон Код: `<body> <div class="mouse-parallax"> <div class="mouse-parallax-bg"></div> </div> </body>` Код: `.mouse-parallax { margin: 0; padding: 0; height: 700px; position: fixed; position: relative; overflow: hidden; } .mouse-parallax-bg { position: absolute; background-image: url("../img/priroda.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 150%; height: 150%; transition: all 0.1s ease; }` Код: `let bg = document.querySelector('.mouse-parallax-bg'); window.addEventListener('mousemove', function(e) { let x = e.clientX / window.innerWidth; let y = e.clientY / window.innerHeight; bg.style.transform = 'translate(-' + x * 250 + 'px, -' + y * 250 + 'px)'; });` по какойто причине не могу в css поставить высоту блока с картинкой в процентах = 100% и зафиксировать чтоб непрокручивалась, может что добавить в js? и при изменении размера браузера пропорции неменяються\

15.09.2020, 02:07	#2
дмитрий75 Новичок Джуниор Регистрация: 15.09.2020 Сообщений: 2	нашел ошибку сам же) вместо указания высоты в процентах Код: `height: 100%;` нужно было написать Код: `height: 100vh;` непойму точно почему ,но заработало)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Стоит ли становиться программистом или бухгалтером, + и - ?	Ultron5	Свободное общение	10	06.08.2018 17:43
Стоит ли становиться программистом?	kappka	Свободное общение	49	21.08.2013 16:38
У меня почему то TTabSheet не становиться невидимым.	tonatas	Общие вопросы Delphi	1	01.09.2010 12:52
как сделать чтобы картинка была фоном в body в самом низу	aseeva_sonya	HTML и CSS	8	15.01.2010 16:14
музыка фоном	Bayazet	Общие вопросы Delphi	0	24.12.2008 17:13