Marquee block

Marquee block is a universal way to add infinite scrolling to anything. Now, it’s very easy to do with a new block. Block supports vertical and horizontal scrolling and also fade effect.

Check the video on how it works

Important. Currently, marquee block has some limitations and it doesn’t support scenarios when you have deep nested containers. For such cases, better to use Slider block and method from our Fancy Academy

Marquee Element also available in Element block as variation

Copy this post’s content
<!-- wp:paragraph -->
<p>Marquee block is a universal way to add infinite scrolling to anything. Now, it's very easy to do with a new block. Block supports vertical and horizontal scrolling and also fade effect. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://greenshift.wpsoul.net/marquee-logo-carousel/" target="_blank" rel="noreferrer noopener">Demo Horizontal</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://greenshift.wpsoul.net/marquee-vertical-cta/" target="_blank" rel="noreferrer noopener">Demo Vertical</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p>Check the video on how it works</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=8yLVSa33nUA","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=8yLVSa33nUA
</div></figure>
<!-- /wp:embed -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-715db65"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-715db65" id="gspb_infoBox-id-gsbp-715db65"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Important. Currently, marquee block has some limitations and it doesn't support scenarios when you have deep nested containers. For such cases, better to use Slider block and method from our <a href="https://greenshiftwp.com/fancy/marquee-effect-or-infinite-scrolling/" target="_blank" rel="noreferrer noopener">Fancy Academy</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-7eb139d"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-7eb139d" id="gspb_infoBox-id-gsbp-7eb139d"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Marquee Element also available in Element block as variation</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
«
»