Having a background in photography and using SVG graphics as a mask, I have implemented an image as the background-image and the svg mask as a mask-image on the same element. The result is displayed below:
My query pertains to expanding this image to fit the screen upon mouse scroll. Are there any third-party plugins required to achieve this?
While I have utilized JavaScript, the desired outcome has not been attained.
window.addEventListener('scroll', function() {
const el = document.querySelector('.el');
const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
const newSize = (100 + scrollPercent * 100) + 'vw';
el.style.width = newSize;
el.style.height = newSize;
});* {
box-sizing: border-box;
}
body {
margin: 0;
background: #8f7a66;
}
.el {
width: 100vw;
height: 100vh;
padding: 1rem;
background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
mask-size: 50vmin;
mask-repeat: no-repeat;
mask-position: center;
}<div class="el"></div>