Есть логотип в шапке размеры 130x130, нужно чтобы при прокрутки страницы (до 500px) он уменьшался плавно пример:
129x129
128x128
127x127
.
.
.
50x50
как это можно сделать
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПри помощи события scroll
, различных метрик для элементов и арифметики.
let minSize=50,
el=document.querySelector('div'),
page=document.querySelector('html'),
height={
el:el.offsetHeight-minSize,
page:500
}
document.addEventListener('scroll',()=>{
let st=page.scrollTop
if(st>=height.page) return
let percent=height.page/st,
value=height.el/percent
el.style.height=height.el-value+minSize+'px'
})
body{
height:2000px;
}
div{
background:red;
width:130px;
height:130px;
position:fixed;
}
<div></div>