Close

Animated timeline while scrolling

This is a sample example of displaying the timeline with the use of HTML, CSS, and JavaScript. The timeline has been implemented with the use of div and the timeline view has been implemented with CSS styles. The wrapper class has the styles of background color as #42A5F5, width as 100%, min-height as 100vh, height as 100%, font as normal 16px/26px Open Sans Condensed, sans-serif, color as #fff, padding as 100px 20px 200px and box-sizing as border-box. The JavaScript function has been created to apply the scroll and check for the fade. The JavaScript function removeClass removes the current classes of style whereas addClass function appends the new classes of styles to the elements dynamically. Each timeline section has the styles of background color as #f4f4f4, color as #777, padding as 15px, margin as 60px 20px, width as 300px, position as relative, border-radius as 4px and transition as all 0.3s ease-in-out. Source: https://codepen.io/rprajapatii/pen/AXoWyd

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.