DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > CSS Bouncing Arrow

CSS Bouncing Arrow

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

Paul Underwood user avatar by
Paul Underwood
·
Sep. 29, 16 · Web Dev Zone · Tutorial
Like (2)
Save
Tweet
15.90K Views

Join the DZone community and get the full member experience.

Join For Free

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.

CSS

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Event-Driven Hello World Program
  • Is NoOps the End of DevOps?
  • Progressive Web Apps vs Native Apps: Differences and Similarities
  • Internal Developer Platform in Plain English

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo