Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit turpis eu egestas lacinia. Vivamus faucibus scelerisque leo, sit amet vulputate augue varius eget. Donec condimentum, nunc vel aliquam scelerisque, ante nisi hendrerit lorem, a consectetur tortor sem et nisi. Vestibulum ullamcorper feugiat dui, nec tristique ex.
Cras a purus sit amet quam fermentum lacinia. Etiam vitae ornare enim, a rhoncus elit. Suspendisse efficitur a augue et sagittis. Sed cursus sem in libero scelerisque dignissim. Sed sodales laoreet purus, in dignissim mauris tempus in. In ut pharetra nibh, sed mollis libero. Integer est ipsum, pellentesque in orci non, posuere vulputate diam. Maecenas gravida magna dolor, sed scelerisque mauris vestibulum non. Morbi congue quam sem, eget aliquet nisi varius vitae.
This is a heading
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut id volutpat leo, a commodo quam. Pellentesque porttitor nulla quis finibus blandit. Sed dignissim libero id neque facilisis sagittis. Sed hendrerit ex laoreet ante porttitor, vitae tincidunt sapien mollis. Aenean eu ex lobortis, accumsan enim feugiat, tempor urna. Pellentesque dictum fringilla iaculis. Suspendisse sed tempor nulla, ac tincidunt ante. Integer elementum erat a suscipit pharetra. Suspendisse at blandit purus, nec tempor purus.
This is a subheading
Aliquam ullamcorper congue elit, a pretium dolor malesuada vel. Praesent placerat diam mauris, eu pellentesque enim aliquam at. Fusce purus metus, sollicitudin quis rutrum id, dapibus et ligula. Etiam eget convallis libero, vitae gravida elit. Pellentesque ut luctus ante, at fringilla ante. Mauris in nibh vel tortor consequat finibus. Nullam mi nibh, blandit tempor rutrum sed, tincidunt eu mi.
Note: This block is designed to be used within content when you want to bring attention to something, such as an optin form inside blog posts.
To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).
IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block. This code monitors the scroll position and allows the animation to function.
Editing:
The cta-wrapper row and the cta section are the containers that make this effect work. The row inside the cta section can contain any content you wish, it doesn’t have to be this optin form.
You may want to change the points at which the animation starts and stops. This is controlled by the JavaScript you add to the header and footer scripts within the page. This is the only part you need to edit:
rootMargin: “-30% 0px -30% 0px”,
The root margin values move clockwise: top, right, bottom, left. You can use % or px values, but I suggest you leave at % so it adapts well on mobile. Decrease the values to have the animation on screen for longer, and increase for shorter. The top and bottom values do not need to be the same.
Sign up to the newsletter
Unicorn air plant kogi food truck
Banh mi vegan pinterest franzen hell of, narwhal keytar intelligentsia chartreuse kickstarter prism master cleanse cred. Scenester wolf slow-carb, man braid woke paleo normcore.
Note: To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).
IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block.
This template is made up of 2 sections within a parent row. The first section contains the HTML to create the bar container. The second section is for your content. You can add anything you like in this second section. A post (like the demo) or an optin form, or anything else. Just be sure to leave the top section as it is.
You can adjust the height of the bar animation for desktop, tablet, and mobile.
There are a number of variables at the top of the CSS in the Custom CSS toggle of the parent row:
–bb-soundbar-1-height-desktop: 350px;
–bb-soundbar-1-height-tablet: 350px;
–bb-soundbar-1-height-mobile: 500px;
Change the values for each device size. The animated bars must have an explicit height set and you can use any unit EXCEPT %. (px, em, rem, vh, vw are all fine.)
If you want to change the colour and/or opacity of the animated bars you can so this within the variables at the top of the CSS also.
–bb-soundbar-1-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(255, 255, 255, 0) 100%);
–bb-soundbar-1-opacity: 0.5;
The background variable defines the bars colour. I’m using a linear gradient which makes the bars fade at the top and bottom, giving them a softer effect. You can edit the gradient, replace with your own, or switch to a solid colour. Here is a handy gradient tool that will generate the required CSS for you: https://cssgradient.io
The opacity value can be adjusted to brighten or dim the animated bars.
