Download Code
<!-- wp:greenshift-blocks/element {"id":"gsbp-811f4f9","tag":"section","type":"inner","localId":"gsbp-811f4f9","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"],"paddingTop":["80px"],"paddingBottom":["80px"],"backgroundColor":["#000000"],"color":["#ffffff"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-811f4f9 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-9dadc70","type":"inner","localId":"gsbp-9dadc70","styleAttributes":{"maxWidth":["100%"],"width":["800px"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-9dadc70"><!-- wp:greenshift-blocks/element {"id":"gsbp-76e7b21","textContent":"Scroll Down to see Effect","localId":"gsbp-76e7b21","styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dgiga, clamp(3rem, 5vw, 4.5rem))"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgiga, clamp(4rem, 6vw, 5rem))"],"marginBottom":["45px"],"textAlign":["center"]}} -->
<div class="gsbp-76e7b21">Scroll Down to see Effect</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p>To configure this effect, click on Background Parallax block, then in Responsive panel, find extra options. --block-height will set your height of block. --scroll-height will change strength of movement. Click on Image to change image block. You can also put any content inside this area. If you want, you can also change Overlay Opacity in Overlay Block</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to add Blur or other Effects on image, add it to image block itself or add Backdrop Filter in Effects panel in Overlay block.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First Section will move from Top to Bottom, second is opposite, so copy which one you like more</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-62b10a4","tag":"section","type":"inner","localId":"gsbp-62b10a4","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"],"paddingTop":["80px"],"paddingBottom":["80px"],"backgroundColor":["#000000"],"color":["#ffffff"],"cssVars_Extra":[{"name":"\u002d\u002dblock-height","value":"400px"},{"name":"\u002d\u002dscroll-height","value":"150px"}],"minHeight":["var(\u002d\u002dblock-height)"],"overflow":["clip"]},"isVariation":"contentwrapper","metadata":{"name":"Background Parallax"}} -->
<section class="gsbp-62b10a4 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-36ac8f1","type":"inner","localId":"gsbp-36ac8f1","styleAttributes":{"zIndex":["2"],"position":["relative"],"color":["#ffffff"],"color_A":["#ffffff"],"paddingLink_Extra":"all","paddingTop":["30px"],"paddingBottom":["30px"],"paddingLeft":["30px"],"paddingRight":["30px"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-36ac8f1"><!-- wp:greenshift-blocks/element {"id":"gsbp-6ea491e","textContent":"Cover Block with Native Background Parallax","localId":"gsbp-6ea491e","styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxl, clamp(1.6rem, 2.75vw, 1.9rem))"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxl, clamp(2.3rem, 3.45vw, 2.6rem))"]}} -->
<div class="gsbp-6ea491e">Cover Block with Native Background Parallax</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-ffb98b0","type":"no","localId":"gsbp-ffb98b0","styleAttributes":{"position":["absolute"],"top":["0px"],"left":["0px"],"bottom":["0px"],"right":["0px"],"zIndex":["1"],"width":["100%"],"height":["100%"],"backgroundColor":["#29334a82"],"pointerEvents":["none"]},"metadata":{"name":"Overlay"}} -->
<div class="gsbp-ffb98b0"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-c879757","tag":"img","localId":"gsbp-c879757","src":"https://greenshift.wpsoul.net/wp-content/uploads/2024/08/won5-scaled.webp","alt":"","mediaid":3813,"originalWidth":2560,"originalHeight":1463,"styleAttributes":{"position":["absolute"],"zIndex":["0"],"width":["100%"],"objectFit":["cover"],"animation_keyframes_Extra":[{"name":"gs_image_move_down","code":"from{\ntransform: translateY(calc(-1 * var(\u002d\u002dscroll-height)));\n}\nto{\ntransform: translateY(var(\u002d\u002dscroll-height));\n}"}],"animation":["gs_image_move_down both"],"animationTimeline":["view()"],"height":["calc(var(\u002d\u002dblock-height) + ( var(\u002d\u002dscroll-height) * 1.9))"]}} -->
<img class="gsbp-c879757" src="https://greenshift.wpsoul.net/wp-content/uploads/2024/08/won5-scaled.webp" alt="" width="2560" height="1463" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-9b894f7","tag":"section","type":"inner","localId":"gsbp-9b894f7","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"],"paddingTop":["80px"],"paddingBottom":["80px"],"backgroundColor":["#000000"],"color":["#ffffff"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-9b894f7 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-754f90a","type":"inner","localId":"gsbp-754f90a","styleAttributes":{"maxWidth":["100%"],"width":["800px"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-754f90a"><!-- wp:paragraph -->
<p>Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-58c68c0","tag":"section","type":"inner","localId":"gsbp-58c68c0","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"],"paddingTop":["80px"],"paddingBottom":["80px"],"backgroundColor":["#000000"],"color":["#ffffff"],"cssVars_Extra":[{"name":"\u002d\u002dblock-height","value":"400px"},{"name":"\u002d\u002dscroll-height","value":"150px"}],"minHeight":["var(\u002d\u002dblock-height)"],"overflow":["clip"]},"isVariation":"contentwrapper","metadata":{"name":"Background Parallax"}} -->
<section class="gsbp-58c68c0 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-78385e0","type":"inner","localId":"gsbp-78385e0","styleAttributes":{"zIndex":["2"],"position":["relative"],"color":["#ffffff"],"color_A":["#ffffff"],"paddingLink_Extra":"all","paddingTop":["30px"],"paddingBottom":["30px"],"paddingLeft":["30px"],"paddingRight":["30px"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-78385e0"><!-- wp:greenshift-blocks/element {"id":"gsbp-6ade026","textContent":"Cover Block with Native BackGround Parallax","localId":"gsbp-6ade026","styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxl, clamp(1.6rem, 2.75vw, 1.9rem))"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxl, clamp(2.3rem, 3.45vw, 2.6rem))"]}} -->
<div class="gsbp-6ade026">Cover Block with Native BackGround Parallax</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-3c05cae","type":"no","localId":"gsbp-3c05cae","styleAttributes":{"position":["absolute"],"top":["0px"],"left":["0px"],"bottom":["0px"],"right":["0px"],"zIndex":["1"],"width":["100%"],"height":["100%"],"backgroundColor":["#29334a82"],"pointerEvents":["none"]},"metadata":{"name":"Overlay"}} -->
<div class="gsbp-3c05cae"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-8bb4947","tag":"img","localId":"gsbp-8bb4947","src":"https://greenshift.wpsoul.net/wp-content/uploads/2023/06/IMG_3406.webp","alt":"","mediaid":2620,"originalWidth":2560,"originalHeight":1435,"styleAttributes":{"position":["absolute"],"zIndex":["0"],"width":["100%"],"objectFit":["cover"],"animation_keyframes_Extra":[{"name":"gs_image_move_up","code":"from{\ntransform: translateY(var(\u002d\u002dscroll-height));\n}\nto{\ntransform: translateY(calc(-1 * var(\u002d\u002dscroll-height)));\n}"}],"animation":["gs_image_move_up both"],"animationTimeline":["view()"],"height":["calc(var(\u002d\u002dblock-height) + ( var(\u002d\u002dscroll-height) * 1.9))"]}} -->
<img class="gsbp-8bb4947" src="https://greenshift.wpsoul.net/wp-content/uploads/2023/06/IMG_3406.webp" alt="" width="2560" height="1435" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-898fd7b","tag":"section","type":"inner","localId":"gsbp-898fd7b","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"],"paddingTop":["80px"],"paddingBottom":["80px"],"backgroundColor":["#000000"],"color":["#ffffff"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-898fd7b alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-a3972e6","type":"inner","localId":"gsbp-a3972e6","styleAttributes":{"maxWidth":["100%"],"width":["800px"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-a3972e6"><!-- wp:paragraph -->
<p>Ad irure sunt id occaecat in. Id nulla aliquip minim minim consectetur. Ad exercitation deserunt minim eu enim.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

Native Background Parallax

Scroll Down to see Effect

To configure this effect, click on Background Parallax block, then in Responsive panel, find extra options. –block-height will set your height of block. –scroll-height will change strength of movement. Click on Image to change image block. You can also put any content inside this area. If you want, you can also change Overlay Opacity in Overlay Block

If you want to add Blur or other Effects on image, add it to image block itself or add Backdrop Filter in Effects panel in Overlay block.

First Section will move from Top to Bottom, second is opposite, so copy which one you like more

Cover Block with Native Background Parallax

Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.

Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.

Cover Block with Native BackGround Parallax

Ad irure sunt id occaecat in. Id nulla aliquip minim minim consectetur. Ad exercitation deserunt minim eu enim.

Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.

Dolore incididunt magna dolore quis cupidatat occaecat nostrud elit et dolor ex incididunt velit. Proident exercitation ex Lorem. Aute irure labore sunt laboris aliquip commodo. Eu deserunt labore eu. Ex ullamco deserunt officia reprehenderit culpa ad id dolore consequat pariatur fugiat laborum fugiat incididunt sint. Fugiat incididunt labore sit consequat quis anim deserunt id qui laborum. Exercitation proident quis proident laboris Lorem exercitation officia ut minim tempor elit laborum aute. In anim ex velit ut minim labore officia tempor.