Share Tạo hiệu ứng hover nội dung với thư viện Direction Reveal

[filiallion]

Language

Tiếng Việt

Trên một website sẽ có rất nhiều hiệu ứng được tạo ra bởi CSS và JavaScript, trong đó hiệu ứng hover có lẽ là hiệu ứng được sử dụng nhiều nhất. Các bạn sẽ thấy hiệu ứng hover lên các liên kết, văn bản, hình ảnh hay một khối nội dung. Bài viết này tôi giới thiệu với các bạn thư viện Direction Reveal dùng để tạo hiệu ứng hover nội dung văn bản.

Direction Reveal là một thư viện CSS được phát triển tương thích với nhiều CSS framework phổ biến hiện nay như Bootstrap,... Các bạn cũng có thể sử dụng thư viện Direction Reveal ở bất kỳ website nào chỉ với vài thao tác khai báo đơn giản.

Hiện tại, thư viện Direction Reveal cung cấp nhiều hiệu ứng hover như swing, rotate, flip, slide, push, roll out,... Tất cả các hiệu ứng đều có nhiều tuỳ chọn hiệu ứng khác nhau giúp các bạn dễ dàng hơn trong việc thiết kế giao diện website.

Để sử dụng thư viện Direction Reveal, các bạn tải về tại địa chỉ https://github.com/NigelOToole/direction-reveal và tích hợp vào website với dòng lệnh HTML như sau:

<link href="path/to/direction-reveal.css" rel="stylesheet">

Bây giờ, các bạn sử dụng thư viện Direction Reveal như ví dụ sau:

<div class="direction-reveal">
    <a href="#" class="direction-reveal__card">
        <img src="path/to/image.jpg" class="direction-reveal__img">
    </a>
    <div class="direction-reveal__overlay direction-reveal__anim--enter">
        <p class="direction-reveal__text">Content</p>
    </div>
</div>

Trên đây là một ví dụ đơn giản sử dụng thư viện Direction Reveal để tạo hiệu ứng hover cho nội dung. Các bạn có thể tìm hiểu thêm về thư viện Direction Reveal tại địa chỉ https://nigelotoole.github.io/direction-reveal.