<div class="img">
    <img src="이미지.jpg" />
  </div>

.img{
    border-radius: 30px;
    overflow: hidden;
    position:sticky;
    top: 0px;
    right:0;
    height:600px;
    min-width:800px;
    max-width: 100%;
}

sticky 속성을 넣어서 사용
부모 box에 height를 지정하지 않으면 sticky가 먹지 않는다!

app.js

const img = document.querySelector('.img');
const subTitle = document.querySelector('.sub-title-text h2')

window.addEventListener('scroll',()=>{
    const current = window.scrollY;
    img.style.width = `${current * 1.5}px`
    img.style.top = '100px'
})

하단 텍스트 효과

css

.text h2{
    font-size: 6rem;
    font-weight: 600;
    transition: 0.3s ease-in;
    position:absolute;
    bottom:0;
    vertical-align:bottom;
}

app.js

const subTitle = document.querySelector('.text h2')

window.addEventListener('scroll',()=>{
    const current = window.scrollY;
    img.style.width = `${current * 1.5}px`
    img.style.top = '100px'

    if(current >= 1100){
        subTitle.style.bottom = "0"
    }else{
        subTitle.style.bottom  = "-15vh"
    }
})