Image Fullbleed on Scroll

Description: expand image to fullbleed on scroll

• View Demo – Password: abc

#1. Install Code

First, add a blank section

Next, add an Image Block

Next, hover on top right of section > Click Edit Section

At Anchor Link, enter: img-fullscreen

img-fullscreen

Hover on Page where you use Image Block > Click Gear icon

Click Advanced > Paste this code

<!-- Expand image Fullbleed by [email protected] -->
<style>
:root{
  --tp-rolls-image-start-width:72vw;
  --tp-rolls-image-start-height:80vh;
  --tp-rolls-scroll-pin-multiplier:1.2;
  --tp-rolls-mobile-image-start-width:60vw;
  --tp-rolls-mobile-image-start-height:40vh;
  --tp-rolls-mobile-scroll-pin-multiplier:1.08;
}
section[id*="img-fullscreen"] {
overflow:visible!important;--tp-rolls-progress:0;
.content-wrapper,.content{padding:0!important;margin:0!important;max-width:100%!important;width:100%!important;overflow:visible!important}
[data-fluid-engine="true"],.fluid-engine{overflow:visible!important}
.tp-rr-hide-original{opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important}
.tp-rr-stage{position:relative;width:100%;z-index:5}
.tp-rr-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:visible}
.tp-rr-frame{position:relative;width:calc(var(--tp-rolls-image-start-width) + (100vw - var(--tp-rolls-image-start-width)) * var(--tp-rolls-progress));height:calc(var(--tp-rolls-image-start-height) + (100vh - var(--tp-rolls-image-start-height)) * var(--tp-rolls-progress));overflow:hidden;will-change:width,height,transform}
.tp-rr-frame img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:50% 50%!important;transform:scale(calc(1 + .04 * var(--tp-rolls-progress)));will-change:transform}
@media (max-width:767px){:root{--tp-rolls-image-start-width:var(--tp-rolls-mobile-image-start-width);--tp-rolls-image-start-height:var(--tp-rolls-mobile-image-start-height);--tp-rolls-scroll-pin-multiplier:var(--tp-rolls-mobile-scroll-pin-multiplier)}}
}
</style>
<script>
!function(){function e(e){if(e.querySelector(".tp-rr-stage"))return!0;var t=e.querySelector(".image-block");if(!t)return!1;var r=t.querySelector("img"),n=r&&(r.currentSrc||r.src);if(!n)return!1;var i=document.createElement("div");i.className="tp-rr-stage";var o=document.createElement("div");o.className="tp-rr-sticky";var a=document.createElement("div");a.className="tp-rr-frame";var c=r.cloneNode(!0);c.src=n,a.appendChild(c),o.appendChild(a),i.appendChild(o),t.parentNode.insertBefore(i,t),t.classList.add("tp-rr-hide-original");var d=document.createElement("div");d.className="tp-rr-spacer",i.appendChild(d);var l=0,s=0,u=0,m=!1;function p(){m=!1;var t,r,n,i=((window.scrollY||0)-l)/(s-l);n=1,i=(t=i)<(r=0)?r:t>n?n:t,e.style.setProperty("--tp-rolls-progress",i.toFixed(4))}function v(){var e,t,r,n,o=i.getBoundingClientRect().top+(window.scrollY||0),a=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),c=(e="--tp-rolls-scroll-pin-multiplier",t=1.2,r=getComputedStyle(document.documentElement).getPropertyValue(e),n=parseFloat(String(r||"").trim()),isFinite(n)?n:t);u=Math.max(200,Math.round(a*c)),l=o,s=o+u,d.style.height=u+"px",p()}return window.addEventListener("scroll",(function(){m||(m=!0,requestAnimationFrame(p))}),{passive:!0}),window.addEventListener("resize",v),v(),!0}function t(){var t=document.querySelectorAll('section[id*="img-fullscreen"]'),r=!1;return t.forEach((function(t){e(t)&&(r=!0)})),r}function r(){if(!t()){var e=0,r=setInterval((function(){e++,(t()||e>60)&&clearInterval(r)}),250);new MutationObserver((function(){t()})).observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0}),window.addEventListener("load",(function(){t()}),{once:!0})}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r()}();
</script>

#2. Customize

All style options here (Line 04 to Line 09)

--tp-rolls-image-start-width:72vw;
--tp-rolls-image-start-height:80vh;
--tp-rolls-scroll-pin-multiplier:1.2;
--tp-rolls-mobile-image-start-width:30vw;
--tp-rolls-mobile-image-start-height:40vh;
--tp-rolls-mobile-scroll-pin-multiplier:1.08;