😀CSS-only infinite scrolling carousel animation (ok)

https://blog.logto.io/css-only-infinite-scroll

C:\Users\Administrator\Desktop\You-Dont-Need-JavaScript\Slideshow\purnasth\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Infinite Scroll Animation - Purna</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <h1>Welcome to Nepal</h1>
  <div class="carousel animated">
    <div class="group animated">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
    <div aria-hidden="true" class="group animated">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
  </div>
</body>
</html>
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.card {
  width: 100%;
  color: #fff;
  border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
  padding: 20px;
  font-size: xx-large;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  &:nth-child(1) {
    background: #7958ff;
  }
  &:nth-child(2) {
    background: #5d34f2;
  }
  &:nth-child(3) {
    background: #4300da;
  }
}
.carousel {
  margin: 0 auto;
  padding: 20px 0;
  // max-width: 700px;
  overflow: hidden;
  display: flex;
  &:not(.basic) {
    > * {
      flex: 0 0 100%;
    }
  }
}
.carousel.animated {
  &:hover {
    .group {
      animation-play-state: paused;
    }
  }
}
.group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  will-change: transform;
}
.group.animated {
  animation: scrolling 10s linear infinite;
}

Introduction#

We love JavaScript, of course. But it's always fun to see what we can achieve with CSS alone - especially when it comes to animations, since CSS animations are often "less heavy" than JavaScript animations.

In this post, I'll show you how to create an infinite scrolling carousel animation with pause on hover effect using only CSS. Here's a preview of what we'll be building:

ABCABC

This tutorial uses & nesting selector syntax, which is a Baseline 2023 feature. Please adjust the code accordingly if you're targeting older browsers.

Create a row of cards#

First, let's create the basic structure of our carousel. Consider a row of cards:

<style>
  .carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 700px;
    overflow: hidden;
    display: flex;
  }

  .card {
    width: 100%;
    color: white;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    padding: 20px;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    min-height: 200px;

    &:nth-child(1) {
      background: #7958ff;
    }

    &:nth-child(2) {
      background: #5d34f2;
    }

    &:nth-child(3) {
      background: #4300da;
    }
  }
</style>
<div class="carousel basic">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

ABC

Looks good, right? The cards can be your fancy banners, product images, or anything you want to showcase in your carousel.

Duplicate the cards#

Since we want the carousel to be infinite, it should be connected end-to-end. Instinctively, we can try to repeat the cards:

<style>
  .carousel {
    /* ... */
    > * {
      flex: 0 0 100%;
    }
  }

  /* Group the cards for better structure. */
  .group {
    display: flex;
    gap: 20px;
    /* Add padding to the right to create a gap between the last and first card. */
    padding-right: 20px;
  }
</style>
<div class="carousel">
  <div class="group">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
  </div>
  <!-- Add `aria-hidden` to hide the duplicated cards from screen readers. -->
  <div aria-hidden class="group">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
  </div>
</div>

Check out the result:

ABCABC

Only the first set of cards is visible. If you check the HTML, you'll see that the second set of cards is hidden and follows the first set.

Animate the carousel#

Time to animate the carousel! Since we have two sets of cards connected, we can animate the carousel by transforming the card groups. Here's how:

<style>
  .group {
    /* ... */
    will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 10s linear infinite;
  }

  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

We still have one last touch to add: pausing the animation when hovering over the carousel. This will give users a chance to see the content more clearly. Since we have two sets of cards, we need to pause both groups when hovering over the carousel:

<style>
  .carousel {
    /* ... */
    &:hover .group {
      animation-play-state: paused;
    }
  }
</style>

That's it! 🎊 Now the carousel will pause when you hover over it.

ABCABC

Final thoughts#

CSS is powerful, and it's always fun to explore what we can achieve with it. There are also other CSS properties like scroll-snap-type and scroll-snap-align that can help you create an interactive carousel. Happy coding! 🚀

Previous[BEM] Exploring SMACSS: Scalable and Modular Architecture for CSSNext🤡 Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết

Last updated