[英]Background image increase size with scroll
I am trying to make the background image on a div
change its scale as per the amount of page scrolled.我正在尝试使
div
上的背景图像根据滚动的页面量更改其比例。 Tried a lot but this is what I achieved.尝试了很多,但这就是我所取得的。 It starts ok with the image completely covering the
div
, but the moment I scroll it snaps to a smaller size and when I scroll all the way top again, the image never gets back to 100% cover
.它从图像完全覆盖
div
开始,但是当我滚动它的那一刻,它会捕捉到一个较小的尺寸,当我再次滚动到顶部时,图像永远不会回到 100% cover
。 Please help.请帮忙。 The code is below as well as on Codepen .
代码在下面以及Codepen上。
Update : I partially fixed it, but with additional content in the section_1
div, why in the responsive mode the height of .section_1
div is getting reduced and not keeping the 90vh.更新:我部分修复了它,但是在
section_1
div 中添加了额外的内容,为什么在响应模式下.section_1
div 的高度越来越小,而不是保持 90vh。 Image attached below.图片附在下面。
HTML: HTML:
<main>
<div class="section_1">
<div class="welcome_message">
<div class="welcome_text">
<p class="welcome">Welcome to</p>
<h1>My</h1>
<p class="tagline">DIRECTORY</p>
</div>
</div>
</div>
</main>
CSS: CSS:
main{
min-height: 200vh;
}
.section_1{
position: relative;
width: 100%;
height: 90vh;
background: url(https://images.pexels.com/photos/9467294/pexels-photo-9467294.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) 40% 10%/cover no-repeat;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.section_1 .welcome_message{
width: 80%;
min-height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
background: none;
padding: 0 1rem 10rem 0;
.welcome_text{
z-index: 3;
// color: white;
background-color: rgba(1, 55, 131, 0.5);
border-bottom: 0.5rem solid white;
padding: 1rem 2rem;
border-end-start-radius: 2rem;
}
.welcome{
color: white;
font-weight: 400;
}
h1{
font-size: 2rem;
color: white;
font-weight: 600;
margin-block: -0.3em;
}
.tagline{
color: white;
font-weight: 400;
}
}
JS: JS:
let bg = document.querySelector('body .section_1')
document.addEventListener('scroll', () => {
let x = window.pageYOffset
bg.style.backgroundSize = (100 + x/10)+'% auto'
})
Because you scroll all the way top again, bg.style.backgroundSize = 'auto 130%', The value of bg.style.backgroundSize should null.因为再次滚动到最上面,bg.style.backgroundSize = 'auto 130%',bg.style.backgroundSize的值应该是null。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.