Làm ảo thuật với chàng Peter Pan

Nguyen Tri Trung (Ha Noi)

Trong e-CHÍP số 26, “sếp” Bảo Kha có bài “Giai nhân mờ nhân ảnh” nói về thủ thuật JavaScript làm cho mỹ nhân xuất hiện trong “màn sương” mờ mờ ảo ảo. Quả là đáng bái phục! Cảm hứng dâng trào, tôi giở sách "ngồi thiền" chừng một giờ và tìm ra vài chiêu mới. Xin phép được lấy ảnh chàng Peter Pan trên bìa e-CHÍP số 10 để minh hoạ.

Chiêu 1: Peter Pan trong màn sương kỳ ảo (tương tự "giai nhân mờ nhân ảnh")

<img src="peterpan.gif"
onmouseover="this.style.filter=
'alpha(opacity=100,finishopacity=0,style=2)';" onmouseout="this.style.filter=
'alpha(opacity=100,finishopacity=0,style=1)';">

Trong đó ta dùng bộ lọc (filter) mang tên alpha với 3 tham số. Tham số opacity là độ đục khởi đầu và finishopactity là độ đục cuối cùng của ảnh (tính theo phần trăm). Thông qua tham số style, bạn quy định kiểu trong suốt của ảnh. Các trị số khác nhau của style tạo ra sự chuyển đổi khác nhau trên ảnh từ đục đến trong (0 : toàn bộ ảnh, 1 : theo đường thẳng, 2 : theo hình tròn, 3 : theo hình chữ nhật).

Chiêu 2: Peter bay nhanh

<img src="peterpan.gif"
onmouseover="this.style.filter=
'blur(direction=90,strength=30)';"
onmouseout="this.style.filter='';">

Tham số strength là độ nhoè (“tốc độ bay”) của Peter Pan và direction là hướng (góc) làm nhoè so với hướng thẳng đứng (tính theo độ).

Chiêu 3: Bóng đổ của Peter Pan

<img src="peterpan.gif"
onmouseover="this.style.filter=
'dropShadow(color=white,offX=-5,offY=-5)';" onmouseout="this.style.filter='';">

Tham số color là màu của bóng đổ (bạn có thể ghi màu bằng tên hoặc bằng trị thập lục phân), offX và offY là độ xê dịch của bóng theo phương ngang và phương dọc. Cả offX và offY đều có thể nhận trị âm và được tính bằng pixel.

Chiêu 4: Peter Pan toả sáng

<img src="peterpan.gif"
onmouseover="this.style.filter=
'glow(color=yellow,strenght=5)';"
onmouseout="this.style.filter='';">

Trong đó, color là màu của “vầng hào quang” quanh Peter Pan và strength là độ sáng.

Chiêu 5: Bóng chiếu của Peter Pan

Chiêu 6: Peter Pan “xuất thần nhập... dạ xoa”

<img src="peterpan.gif"
onmouseover="this.style.filter=
'wave(freq=3,lightStrength=30,phase=20,strength=20)';" onmouseout="this.style.filter='';">

Chiêu 7: Peter leo trần

<img src="peterpan.gif"
onmouseover="this.style.filter='flipV()';"
onmouseout="this.style.filter='';">

Chiêu 8: Peter Pan "vô hình"

<img src="peterpan.gif"
onmouseover="this.style.filter=
'mask(color=yellow)';"
onmouseout="this.style.filter='';">

Về thực chất, chiêu này tạo ra một thứ "mặt nạ" từ bản gốc.

Chiêu 9: Peter Pan trong mơ

<img src="peterpan.gif"
onmouseover="this.style.filter=invert()';"
onmouseout="this.style.filter='';">

Peter Pan "hư hư thực thực" là nhờ được chuyển thành màu âm bản.

Chiêu 10: Kết hợp loạn xạ

<img src="peterpan.gif"
onmouseover="this.style.filter=
'alpha(opacity=100,finishopacity=0,
style=2); invert()';"
onmouseout="this.style.filter='';">

 Ví dụ nêu trên cho thấy bạn có thể dùng đồng thời nhiều bộ lọc, chỉ cần liệt kê chúng và phân cách bằng dấu chấm phẩy.

Tôi còn khá nhiều chiêu khác với JavaScript nhưng xin "thui", sợ bạn hoa mắt. Hẹn gặp lại!