Trình chiếu ảnh với jQuery

Thuyết trình là công việc tôi làm thường xuyên. Mỗi buổi thuyết trình thường có khoảng thời gian chờ đợi hoặc nghỉ giải lao. Để bớt nhàm chán, tôi làm thêm một file PowerPoint gồm nhiều hình ảnh thiên nhiên để chiếu trong những lúc như thế. Vấn đề là tôi hay bỏ quên cái file PowerPoint này. Do vậy, để cho tiện, tôi thiết kế một ứng dụng web slideshow tự động. Khi cần, tôi vào trình duyệt, gõ địa chỉ, và có ngay một slideshow ảnh.

Ứng dụng rất đơn giản, chỉ gồm một file HTML. Khi chạy, nó lấy hình từ một dịch vụ cung cấp ảnh miễn phí. Sau vài giây, hình cũ sẽ biến mất và chuyển sang hình mới, kèm theo hiệu ứng chuyển ảnh đẹp mắt. Để tạo hiệu ứng chuyển ảnh này, tôi dùng CSS3 transition.

1
2
3
4
5
6
7
8
body {
    background: url(https://unsplash.it/1185/889/?random) no-repeat center center fixed;
    background-size: cover;
    transition-property: background-image;
    transition-duration: 2s;
    transition-delay: 2s;
    transition-timing-function: ease-in-out;
}

Ở đây, tôi dùng toàn bộ thẻ <body> để hiển thị hình ảnh. Cách này có lợi thế là không cho người xem tải ảnh bằng click phải. Tiếp theo, tôi dùng một dịch vụ API cung cấp hình ảnh đẹp và hoàn toàn miễn phí có tên Unsplash. Để chọn hình ngẫu nhiên, tôi thêm vào tham số random phía sau khi gọi API. Ở mục transition-property, tôi khai báo thuộc tính CSS cần áp dụng hiệu ứng chuyển đổi. Phần transition-duration, tôi khai báo thời gian diễn ra hiệu ứng, ở đây tôi chọn 2 giây. Phần transition-delay sẽ trì hoãn hiệu ứng để trình duyệt có thời gian tải hình về trước khi hiện ra cho người xem. Tại mục transition-timing-function, tôi khai báo kiểu chuyển động ease-in-out. Mục này khai báo tốc độ của hiệu ứng, ở đây ease-in-out nghĩa là chậm-nhanh-chậm, vào chậm và ra chậm. Khi hiển thị, hình ảnh sẽ rõ dần và mờ dần khi biến mất.

Kế đến, tôi dùng jQuery để canh thời gian, cứ mỗi 10 giây sẽ chạy đoạn script chuyển hình bằng cách thay đổi thuộc tính CSS background-image của thẻ <body>.

1
2
3
setInterval(function() {
    $("body").css("background-image", "url(https://unsplash.it/1185/889/?random&" + Math.random() + ")");
}, 10000);

Trong đoạn code này, tôi thêm một dãy số random bằng hàm Math.random() để trình duyệt tự động tải hình mới thay vì dùng lại hình cũ trong cache. Tham số thứ hai của hàm setInterval() là số mili giây. Ở đây tôi chọn 10 giây (10.000 mili giây). Vậy là xong, ta có thể chạy ứng dụng ngay và hưởng thụ kết quả.

Để cho tiện, tôi đăng cái app này lên host cá nhân. Khi cần một slideshow hình, tôi gõ địa chỉ vào trình duyệt, bấm phím F11 để chuyển sang chế độ toàn màn hình. Rất đơn giản và tiện lợi.

Menu