Component – Diagonal Animated Divider

A diagonal section divider that animates on scroll.Download + DemoView DemoDownload ComponentHow to
The Diagonal Animated Divider is a skewed background that rotates on scroll. 
The animated background is an element in position absolute, that inhe…


This content originally appeared on CodyHouse and was authored by CodyHouse

A diagonal section divider that animates on scroll.Diagonal Animated Divider

Download + Demo

How to

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>
</section>

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 -->
  </div>

  <!-- ? 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>
</section>


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-05-25T14:16:33+00:00) Component – Diagonal Animated Divider. Retrieved from https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/

MLA
" » Component – Diagonal Animated Divider." CodyHouse | Sciencx - Tuesday May 25, 2021, https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/
HARVARD
CodyHouse | Sciencx Tuesday May 25, 2021 » Component – Diagonal Animated Divider., viewed ,<https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/>
VANCOUVER
CodyHouse | Sciencx - » Component – Diagonal Animated Divider. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/
CHICAGO
" » Component – Diagonal Animated Divider." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/
IEEE
" » Component – Diagonal Animated Divider." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/. [Accessed: ]
rf:citation
» Component – Diagonal Animated Divider | CodyHouse | Sciencx | https://www.scien.cx/2021/05/25/component-diagonal-animated-divider/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts