DZone
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
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • How to Submit a Post to DZone
  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Is Podman a Drop-in Replacement for Docker?
  • Comparing Cloud Hosting vs. Self Hosting

Trending

  • How to Submit a Post to DZone
  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Is Podman a Drop-in Replacement for Docker?
  • Comparing Cloud Hosting vs. Self Hosting
  1. DZone
  2. Coding
  3. Languages
  4. 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 · Tutorial
Like (2)
Save
Tweet
Share
16.86K 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.

Trending

  • How to Submit a Post to DZone
  • Avoiding Pitfalls With Java Optional: Common Mistakes and How To Fix Them [Video]
  • Is Podman a Drop-in Replacement for Docker?
  • Comparing Cloud Hosting vs. Self Hosting

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • 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

Let's be friends: