Hiệu ứng bóng nhảy khi cuộn trang với CSS3

0
114

Hôm nay tôi sẽ trình bày cho bạn một thủ thuật nhỏ để tạo hiệu ứng bóng nhảy khi cuộn trang hoặc người dùng click để cuộn trang trông cực kì đẹp mắt.

Xu hướng thiết kế website gần đây thường sử dụng full-screen banner hoặc slider, cho nên hiệu ứng này sẽ tạo thêm sự bắt mắt cho người dùng, bằng cách click chuột vào mũi tên người dùng sẽ thấy được trang tiếp theo.

Với hiệu ứng này, các bạn có thể sử dụng thư viện Animation đã được xây dựng sẵn. Ở bài viết này tôi sẽ không làm như vậy mà sẽ đi xây dựng trực tiếp hàm này sử dụng @-keyframes. Cùng bắt đầu nhé !

HTML

Đầu tiên tôi sử dụng thẻ div với 2 class khác nhau. Class downArrow để set vị trí mũi tên nằm ở giữa trang. Tiếp sau là class bounce để tạo hiệu ứng chuyển động bóng nhảy. Bên trong thẻ div này bạn có thể chèn hình ảnh bất kì, ở đây tôi sử dụng Font Awesome để chèn icon mũi tên này.

Style CSS

Để cho hiệu ứng thêm đẹp thì tôi set body một background màu vàng. Class downArrow sẽ style như này:

Nhằm mục đích hiệu ứng sẽ hoạt động tốt trên cả Firefox và Chrome thì keyframes tôi sẽ viết như này:

Cuối cùng chỉ cần gọi keyframes vừa định nghĩa bên trên cho class bounce, ở đây 3s là thời gian lặp còn infinite là nó sẽ chạy mãi mãi:

OK xong ! Đây là một thủ thuật nhỏ hi vọng sẽ giúp ích được các bạn. Toàn bộ code bên dưới nhé !

See the Pen Arrow effect bouncing animation by huy kon (@huykon225) on CodePen.26877

ĐỂ LẠI BÌNH LUẬN