Diagonal Animated Divider
A diagonal section divider that animates on scroll.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
The Diagonal Animated Divider is a skewed background that rotates on scroll.
The animated background is an element in position absolute, that inherits the size of the parent, and animated using the Scrolling Animations plugin:
<section class="position-relative z-index-1">
<!-- 👇 ... -->
<div class="position-absolute inset-0 bg-primary z-index-1 origin-top-left scroll-fx js-scroll-fx" data-scroll-fx="skewY, -7deg, 0deg, 0%, 50%" aria-hidden="true"></div>
The starting skewY value, set in the
data-scroll-fx attribute, determines the starting inclination (-7deg in the demo). Reduce the skewY value to reduce the starting inclination.
Make sure the z-index value of the animated background is lower than the one of the section content. In the demo, we use the z-index utility classes.
In the demo, we set the background color using the background utility classes. A better approach would be using CodyFrame's color themes:
<!-- 👇 apply the .bg-transparent utility class + the data-theme -->
<section class="position-relative z-index-1 bg-transparent" data-theme="primary">
<div class="container position-relative z-index-2">
<!-- your content -->
<!-- 👇 apply the .bg utility class to this element -->
<div class="position-absolute inset-0 bg z-index-1 origin-top-left scroll-fx js-scroll-fx" data-scroll-fx="skewY, -3deg, 0deg, 0%, 50%" aria-hidden="true"></div>