Loại hiệu ứng nẩy bật tuy đã được giới thiệu khá nhiều trên [email protected], nhưng hầu hết chúng là các hiệu ứng thuần JavaScript, chẳng hạn như:

- Con chuột 'dây cao su'
- Bóng bật tự do
- Trò chơi trọng lực

Hôm nay, xin giới thiệu với bạn một hiệu ứng JavaScript về bật nẩy nữa, nhưng có sử dụng thư viện jQuery nên dễ dàng chỉnh sửa và thay đổi hướng di chuyển và độ bật của đối tượng hơn.

Một đồng hồ báo giờ tuyệt nhất trên trang web tôi từng thấy bằng JavaScript, mặc dù hiệu ứng báo giờ này chỉ thay đổi mỗi năm phút nhưng nó có cách hoạt động và báo giờ cực kì độc đáo: hiển thị hoàn toàn bằng từ ngữ mà không có bất kì con số nào.

Một đoạn mã JavaScript đơn giản sử dụng thư viện jQuery để tạo một khung chứa văn bản di chuyển liên tục lên phí trên. Đoạn mã rất dễ cài đặt và chỉnh sửa cho phù hợp nhu cầu sử dụng, đồng thời kết hợp với việc sử dụng CSS nên hiệu ứng trông khá bắt mắt.

Hiệu ứng này sẽ hiển thị một khung chứa rất nhiều trình đơn, cùng với rất rất rất nhiều mục chọn của chúng khi người dùng rê chuột vào liên kết được chỉ định. Hiệu ứng rất thích hợp nếu website bạn có số lượng danh mục cực lớn, lên đến hàng trăm, cần hiển thị tất cả, giống như trường hợp của jsB@nk phiên bản 8 này.

Bảng thông báo mờ ảo - một hiệu ứng rất hữu ích và thực tế để hiển thị lần lượt các nội dung quan trọng (hay thông báo) trên website của bạn, với hiệu ứng mờ dần khi xuất hiện và biến mất. Nội dung có thể được xây dựng sẵn trên cùng trang, hoặc có thể được lấy từ các trang khác thông qua kĩ thuật AJAX; hiệu ứng còn sử dụng cookie để lưu thông điệp cuối cùng mà người dùng đã nhấn.

Với đoạn mã này, bạn sẽ dễ dàng tác động hiệu ứng mờ dần khi người dùng rê chuột đến cho bất cứ đối tượng nào trên web một cách nhanh chóng, bằng cách thêm một tên lớp cho đối tượng và các công việc còn lại sẽ được hiệu ứng thực hiện.

Hiệu ứng sẽ tạo một trình đơn với chuyển động kéo xổ xuống mỗi khi người dùng rê chuột đến liên kết được chỉ định, hoặc được thiết lập để xuất hiện khi người dùng nhấn chuột vào liên kết chỉ định. Trình đơn còn cho phép bạn thiết lập chiều cao với tính năng cuộn đối với các danh sách liên kết lớn.

Với đoạn mã này, chú thích của bạn được nhúng trực tiếp vào trong trang web và sẽ hiển thị với hiệu ứng mờ dần mỗi khi người dùng rê chuột vào liên kết chỉ định. Chú thích sẽ hiển thị ngay bên dưới liên kết và bạn có thể sử dụng các thẻ HTML cho chú thích.

Đoạn mã này giúp bạn tiết kiệm không gian cho web thông qua một hiệu ứng khá độc đáo: tạo một khung nội dung xổ dọc có thể ẩn/hiện ở phía trên cùng của trang web. Người sử dụng nhấn vào nút nhô ra để kéo khung nội dung xuống, và nhấn thêm một lần nữa tại một vị trí bất kì trong khung để đóng nó lại. Hiệu ứng rất dễ chỉnh sửa và sử dụng, chẳng hạn như chiều cao của khung, nhãn của nút hiển thị, thời gian xuất hiện,...