Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Bouncing Arrow

DZone's Guide to

CSS Bouncing Arrow

In this tutorial, we're going to learn how you can create an animated bouncing arrow by using CSS.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

In this tutorial, we're going to learn how you can create an animated bouncing arrow by using CSS, like the example above. You'll see this type of animation on sites that use full page slides to showcase parts of the site and use this bouncing arrow effect to show the visitor they can click here to quickly move to the next slide.

First, we add the HTML element to the page, this can be just a div with the classes of arrow and bounce.

<div class="arrow bounce"></div>

Next, we need to add the arrow down image which we can do by using the below base64 image in CSS.

background-image: url(data:image/...

With look of the arrow on the page, we need to make sure the div is centered which we can do by using position: relative; with left: 50%;

.arrow
{
  cursor: pointer;
  position: relative;
  bottom: -2rem;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;

  /**
   * Dark Arrow Down
   */
  background-image: url(data:image/...
  background-size: contain;
}

The animation we want to use in a bounce effect which uses CSS animation the loop of the animation will take 2 seconds to loop and will continue for infinite.

.bounce {
  animation: bounce 2s infinite;
}

The bounce animation works by using the CSS property transform with value translateY, first it starts off at 0 then we move it up to -30px and back to 0.

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

View the demo page to see how you can use this in your projects.

<div class="page-slide blue">
    <div class="container">
        <h1>Slide 1</h1>
        <div class="arrow bounce"></div>
    </div>
</div>

Add Next Slide Click Event

To go to the next slide we need to add a click event to the arrow, from the arrow we need to find the parent slide div. In the example finding the slide div is easy we just need to grab the parent element. From the slide div we need to navigate to the next slide and scroll to this position. Below is the jQuery code you can use to do this functionality.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
css ,html ,web dev

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}