Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Ripple Effect và Cursor Animation đẹp mắt với CSS và JavaScript

@devnavMar 28, 20215 min read...

Hi 😁 Rất vui được gặp lại các bạn, trong bài viết mới này mình sẽ hướng dẫn cho các bạn làm 2 animation đẹp mắt nhé. Đó là hiệu ứng gợn sóng và cursor animation.

Để hiểu rõ hơn thì chúng ta sẽ coi một demo:

Nếu bạn đã xem demo mà muốn tìm hiểu về 2 effect này thì chúng ta cùng bắt đầu ngay nào 😁.

Nội dung tương tự:

Ripple Effect

Đầu tiên chúng ta sẽ làm hiệu ứng gợn sóng trước. Ta sẽ tạo HTML như sau:

<div class="media-play-icon">
  <i class="fas fa-play media-icon"></i>
</div>

Thêm style cho media play icon:

.media-play-icon {
    width: 50px;
    height: 50px;
    background-color: #dc3545;
    border-radius: 50%;
    position: relative;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

Để căn giữa theo chiều dọc và ngang cho icon bên trong div media-play-icon chúng ta có nhiều cách nhưng mình chọn cách đơn giản nhất là:

text-align:center và line-height: 50px. Với line-height ta sẽ căn theo chiều dọc.

line-height được tính bằng khoảng cách trên và khoảng cách dưới của text.

Mình lấy ví dụ:

Giả sử font-size của text là 16px. line-height mình cho 60px như vậy khoảng cách trên và dưới của text là bằng nhau và bằng (60px-16px)/2 = 22px.

Quay trở lại bài trên, khi set line-height: 50px và với icon có font-size là 16px ta sẽ có khoảng cách trên dưới của icon là (50px-16px)/2 = 17px => căn theo chiều dọc thành công 🎉.

Tiếp theo ta sẽ viết animation cho .media-play-icon::before và .media-play-icon::after:

Mình sẽ cho chiều dài và rộng bằng với div media-play-icon.

.media-play-icon::before,
.media-play-icon::after {
    top: 0;
    left: 0;
    border-radius: 50%;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

👉 Tiếp theo, ta viết animation cho Ripple Effect:

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

Giải thích animation ripple:

0%: Mình để box-shadow tất cả các thuộc tính là 0 và blur là màu trắng, opacity là 0.6

50%: Tăng spread (kích thước của shadow) lên thành 40px.

100%: tất cả các thuộc tính là 0 và blur là màu trắng opacity là 0.

Ta sẽ add animation vào .media-play-icon::before và .media-play-icon::after 🎉

.media-play-icon::before,
.media-play-icon::after {
    animation: ripple 3s infinite;
}

Và thêm animation-delay:

.media-play-icon::before {
    animation-delay: 0.9s;
}
.media-play-icon::after {
    animation-delay: 0.5s;
}

Sau đây là kêt quả:

Như vậy là chúng ta đã hoàn thành Ripple Effect 😁.

Cursor Animation

Ở animation này ta sẽ ứng dụng Ripple Effect cho mouse. Cụ thể khi mouse di chuyển qua button ta sẽ kích hoạt Ripple Effect. 😁

Đầu tiên ta tạo HTML:

<body>
    <div class="cursor"></div>
    <button class="button">Hover me</button>
</body>

Style cho cursor:

.cursor {
    position: absolute;
    border: 2px solid #f06a73;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    transition: transform 0.3s linear;
}

Style cho button:

.button {
    border: none
    outline: none;
    cursor: none;
    position: relative;
    background-color: #f06a73;
    font-size: 20px;
    color: #fff;
    padding: 8px 22px;
    overflow: hidden;
    border-radius: 50px;
}

👉 JavaScript:

Ta sẽ get button và cursor:

const cursor = document.querySelector('.cursor');
const button = document.querySelector('.button');

Để di chuyển mouse mà cursor đi theo ta sẽ add event mousemove cho document.

document.addEventListener('mousemove', (e) => {
  ...
});

Sau khi add event ta sẽ lấy vị trí của con trỏ chuột và set cho cursor 😁

document.addEventListener('mousemove', (e) => {
    cursor.style.top = e.pageY + 'px';
    cursor.style.left = e.pageX + 'px';
});

Tiếp theo ta cần xử lí khi mouse di chuyển qua button ta sẽ thêm animation cho cursor.

button.addEventListener('mouseover', (e) => {
    cursor.classList.add('ripple');
});

Khi mouse rời khỏi button thì ta remove class ripple:

button.addEventListener('mouseleave', () => {
    cursor.classList.remove('ripple');
});

Mình đã style cho ripple ở css:

.cursor.ripple {
  transform: translate(-50%, -50%) scale(1.4);
  background: rgba(0, 0, 0, 0.1);
}
.cursor.ripple::before,
.cursor.ripple::after {
  top: 0;
  left: 0;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 137, 137, 0.6);
  }
  50% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.cursor.ripple::before,
.cursor.ripple::after {
  animation: ripple 2s infinite;
}
.cursor.ripple::before {
  animation-delay: 0.9s;
}
.cursor.ripple::after {
  animation-delay: 0.5s;
}

Cuối cùng ta có kết quả như thế này 🔥:

Kết

Như vậy là mình đã hướng dẫn cho các bạn xong Ripple Effect và Cursor Animation rồi.

Hi vọng bài viết này sẽ giúp ích cho các bạn.

Happy coding 😁🔥🔥

TABLE OF CONTENTS

Ripple Effect và Cursor Animation đẹp mắt với CSS và JavaScript

Ripple Effect

Cursor Animation

Kết