This effect makes background parallax when background image moves with different speed with wrapper. This can be used as Image Container block. There are two ways to get this effect – with parallax block and with Native Scroll API. Both are supported in plugin

For native scroll – please check this demo, you can download it from library and investigate. It’s based on Native Scroll API

And even more cool, when you set it as full width block.

GreenShift – Background
parallax block

GreenShift – Background
parallax block

There are many options in Parallax Background block. You can set different speed, scroll ration and Fade Overlay Effect

GreenShift – Background
parallax block

GreenShift – Background
parallax block

Copy this post’s content
<!-- wp:paragraph -->
<p>This effect makes background parallax when background image moves with different speed with wrapper. This can be used as Image Container block. There are two ways to get this effect - with parallax block and with Native Scroll API. Both are supported in plugin</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For native scroll - please check this <a href="https://greenshift.wpsoul.net/native-background-parallax/">demo</a>, you can download it from library and investigate. It's based on <a href="https://www.youtube.com/watch?v=fc5uuHN3lkI">Native Scroll API</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And even more cool, when you set it as full width block.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/parallaxbg {"id":"gsbp-5cab7619-3552","parallax_first":true,"heightUnit":["vh","px","px","px"],"height":[100,null,null,null],"parallaximageid":2025,"parallaximageurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/9.webp","spacing":{"margin":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["px","px","px","px"],"locked":true},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"align":"full"} -->
<div id="gspb-gsap-parbg-gsbp-5cab7619-3552" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull" data-first="yes"><div class="gs_parallax_overlay"></div><!-- wp:greenshift-blocks/container {"id":"gsbp-0605a06a-7996","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"minHeightUnit":["vh","px","px","px"],"minHeight":[100,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-0605a06a-7996" id="gspb_container-id-gsbp-0605a06a-7996"><!-- wp:greenshift-blocks/heading {"id":"gsbp-8fe6c97d-f85a","headingContent":"GreenShift - Background\u003cbr\u003e parallax block","typography":{"textShadow":{},"color":"#ffffff","size":[50],"line_height":[60],"alignment":["center"],"sizeUnit":"px","useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"6.2vw","fluidLineMax":"7rem"}} -->
<h2 id="gspb_heading-id-gsbp-8fe6c97d-f85a" class="gspb_heading gspb_heading-id-gsbp-8fe6c97d-f85a ">GreenShift - Background<br> parallax block</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/parallaxbg -->

<!-- wp:greenshift-blocks/parallaxbg {"id":"gsbp-caeeef22-bce8","heightUnit":["vh","px","px","px"],"height":[100,null,null,null],"parallaximageid":2018,"parallaximageurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/2.webp","spacing":{"margin":{"values":{"top":[null],"bottom":[null]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"align":"full"} -->
<div id="gspb-gsap-parbg-gsbp-caeeef22-bce8" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull"><div class="gs_parallax_overlay"></div><!-- wp:greenshift-blocks/container {"id":"gsbp-58ccde99-664a","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"minHeightUnit":["vh","px","px","px"],"minHeight":[100,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-58ccde99-664a" id="gspb_container-id-gsbp-58ccde99-664a"><!-- wp:greenshift-blocks/heading {"id":"gsbp-9300152a-bcb5","headingContent":"GreenShift - Background\u003cbr\u003e parallax block","typography":{"textShadow":{},"color":"#ffffff","size":[50],"line_height":[60],"alignment":["center"],"sizeUnit":"px","useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"6.2vw","fluidLineMax":"7rem"}} -->
<h2 id="gspb_heading-id-gsbp-9300152a-bcb5" class="gspb_heading gspb_heading-id-gsbp-9300152a-bcb5 ">GreenShift - Background<br> parallax block</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/parallaxbg -->

<!-- wp:paragraph -->
<p>There are many options in Parallax Background block. You can set different speed, scroll ration and Fade Overlay Effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/parallaxbg {"id":"gsbp-7b8c4177-f5b2","parallax_first":true,"heightUnit":["vh","px","px","px"],"height":[100,null,null,null],"parallaximageid":2025,"parallaximageurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/9.webp","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":true},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"parallax_fade":true,"background":{"color":"#000000"},"align":"full"} -->
<div id="gspb-gsap-parbg-gsbp-7b8c4177-f5b2" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull" data-first="yes" data-fade="yes"><div class="gs_parallax_overlay"></div><!-- wp:greenshift-blocks/container {"id":"gsbp-1be7c73a-2994","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"minHeightUnit":["vh","px","px","px"],"minHeight":[100,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-1be7c73a-2994" id="gspb_container-id-gsbp-1be7c73a-2994"><!-- wp:greenshift-blocks/heading {"id":"gsbp-bcb3cafa-937d","headingContent":"GreenShift - Background\u003cbr\u003eparallax block","typography":{"textShadow":{},"color":"#ffffff","size":[50],"line_height":[60],"alignment":["center"],"sizeUnit":"px","useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"6.2vw","fluidLineMax":"7rem"}} -->
<h2 id="gspb_heading-id-gsbp-bcb3cafa-937d" class="gspb_heading gspb_heading-id-gsbp-bcb3cafa-937d ">GreenShift - Background<br>parallax block</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/parallaxbg -->

<!-- wp:greenshift-blocks/parallaxbg {"id":"gsbp-79b23d9d-bd3e","parallax_first":false,"heightUnit":["vh","px","px","px"],"height":[100,null,null,null],"parallaximageid":2018,"parallaximageurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/2.webp","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"align":"full"} -->
<div id="gspb-gsap-parbg-gsbp-79b23d9d-bd3e" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull"><div class="gs_parallax_overlay"></div><!-- wp:greenshift-blocks/container {"id":"gsbp-6c29a708-dca2","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"minHeightUnit":["vh","px","px","px"],"minHeight":[100,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-6c29a708-dca2" id="gspb_container-id-gsbp-6c29a708-dca2"><!-- wp:greenshift-blocks/heading {"id":"gsbp-93d78c61-083b","headingContent":"GreenShift - Background\u003cbr\u003e parallax block","typography":{"textShadow":{},"color":"#ffffff","size":[50],"line_height":[60],"alignment":["center"],"sizeUnit":"px","useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"6.2vw","fluidLineMax":"7rem"}} -->
<h2 id="gspb_heading-id-gsbp-93d78c61-083b" class="gspb_heading gspb_heading-id-gsbp-93d78c61-083b ">GreenShift - Background<br> parallax block</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/parallaxbg -->