ID9 - Media Banner Parallax
- Select the Banners Group in the Toolbox
- Select Media Banner component
- Create a data source within a page or globally based on your requirements.
- Select any variant as per requirement
- For this example, we have selected variant - Offset Outer 5 by 5
- Click on image to update it
- Go to styles -
- Select a Media Banner/Image Animations - Parallax
- For reverse component - use Reverse layout
- Select circle in Image variant dropdown
Developer notes
<div class="component media-banner offset-center-5x5 parallax initialized">
<div class="component-content">
<div class="container">
<div class="row flip-textimage-in-mobile ">
<div class="media-section circle">
<picture>
<source media="(max-width: 390px)" srcset="">
<source media="(max-width: 768px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/mediabanners/xl-rectangle-responsiverectangle.png?rev=e34b370395e8420bbfa48b9ef54d9985" alt="" loading="lazy">
</picture>
<div class="parallax-circle" style="transform: translate3d(11.3535px, 7.0959px, 0px);"></div>
</div>
<div class="copy-section">
<h4 class="title">The quick brown fox jumps over</h4>
<p class="tag">The quick brown fox jumps over the lazy dog</p>
<div class="cta-list cta-layout-horizontal"></div>
</div>
</div>
</div>
</div>
</div>