Adding an Animated Scroll Down Anchor
An animated scroll down anchor helps better control the user flow and make sure important content is appropriately shown to a given user.
Contemporary web design is all about providing a simplified and direct user experience. For many websites, this means having clear actions that you expect users to undertake. One such action is the arrow that indicates a user should scroll down to continue reading. This type of UI elements is typically associated with large hero or sectional containers that are often full-width and full-height. The arrow indicates to the user that more content lies below the fold and that, by clicking on the anchor link, they will be taken to next appropriate section.
Animation, on the other hand, is used to capture a user's attention and creates a point of reference that denotes importance. CSS animations can be used to attract a user's eye and make clear where there next behavior should lead.
Using Animate.css, you can create a number of effects that are both visually appeasing and consistent within the world of UX/UI design. In conjunction with an suitable anchor arrow, an animated class can immediately convey to a user that their next point of action should be clicking this specific object. This helps designers and developers better control the user flow and make sure important content is appropriately shown to a given user.
In this tutorial, we will teach you how to add an animated scroll down anchor that utilizes the "bouncy" animation class. Using JavaScript, we attached a 5-second interval to the animation that continues infinitely.
Below is the HTML, CSS, and JavaScript required.
Step 1 - animated-scroll-anchor.html
Copy and paste the following code into animated-scroll-anchor.html
Step 2 - animated-scroll-anchor.css
Download the CSS below and include it in your web page
animated-scroll-anchor.cssStep 3 - animated-scroll-anchor.js
Copy and paste the code below into animated-scroll-anchor.js
Step 4 - Add the following includes to your web page
In this tutorial we showed how to add a bouncy animation to a scroll down anchor. This will help you better control the intended user flow of your web pages and make sure your vital content is prevented to users at the right time.