Bài giảng Thiết kế Web - Chương 18 giới thiệu về filter và trasition. Đây là hai loại hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web. Chúng ta sẽ cùng tìm hiểu thêm về cách sử dụng 2 hiệu ứng này trong bài giảng sau đây. Mời các bạn cùng tham khảo.
CHƯƠNG XVIII FILTER VÀ TRASITION I FILTER Khái niệm: Filter hiệu ứng đặc biệt áp dụng cho đối tượng trang web để thay đổi thể Hiệu ứng Internet Explorer hỗ trợ Cách tạo: − Dùng CSS − Dùng Javascript a) Sử dụng CSS: Cú pháp: Filter: filter_Name(list parameters) Một số filter thôngdụng − Alpha(Opacity : 0-100, Style : 0,1,2,3 ):Bộ lọc suốt • opacity từ (trong suốt) tới 100 (bình thường) • Style kiểu lọc − Blur(Direction:0-360, Strength:1-100, Add :0/1) (cộng hình gốc)Bộ lọc nh • Direction: chiều làm nh tính theo góc, • strength độ nh mạnh hay yếu Ví dụ: − − − − − Chroma(color :#rrggbb):Làm cho màu định color bị DropShadow(color : #rrggbb,OffX, OffY): Tạo bóng đổ xuống mặt phẳng phía • OffX OffY tính pixel chênh lệch theo toạ độ x y hình gốc bóng đổ FlipH( ):Lật hình theo chiều ngang FlipV( ):Lật hình theo chiều đứng Glow(color : #rrggbb, Strength : 1-255):Tạo quầng sáng quanh đối tượng • Strength: độ rộng quầng sáng tính pixel • Color: xác định màu − − − − − − − Gray( ): Thể đối tượng theo thang độ xám Invert( ): Đảo ngược màu Light( ) :Tạo nguồn sáng để chiếu sáng đối tượng Mask(Color : #rrggbb): Tạo mặt nạ với màu xác định Color Shadow (Direction : 0-360, Color= #rrggbb): Tạo bóng đổ cho đối tượng • color định màu cho bóng đổ • Direction: Góc bóng Wave( ): Biến dạng đối tượng theo dạng sóng sin Xray( ): Làm cho đối tượng có hình ảnh ảnh film X quang Sử dụng JavaScript: Cú pháp: object.style.filter = “filter_name(parameters)” − object : tên của đối tượng trang − Nếu muốn kết hợp nhiều filter trang, ta phải phải phân cách chúng với dấu chấm phẩy Ví dụ: h.style.filter =“shadow(direction :60, color= #ff0000); alpha(opacity=60, Style =1 )" b) Có thể sử dụng cách khác xem filter phần mơ hình đối tượng , tham số thuộc tính đối tượng filter Cú pháp object.filters.filter_name.filter_parameter = value − object : tên đối tượng − filter_name : tên filter áp dụng cho đối tượng − filter_parameter : tên tham số đối tượng Ví dụ: TIN NHANH Dùng script để biến đổi màu bóng đổ từ màu đỏ sang màu xanh : logo.filters.DropShadow.Color = "#0000ff" ; addPoint() thiết lập nguồn sáng chiếu sáng đối tượng trang web Cú pháp: object.filters.light.addPoint (x ,z, y, r, g, b, strength) − object : tên đối tượng − x,y,z số tính pixel xác định ví trí nguồn sáng so với gốc toạ độ ví trí bên trái đối tượng − r,g,b giá trị màu theo hệ màu RGB để xác định màu tổng hợp nguồn sáng − strength : giá trị xác định độ mạnh nguồn sáng a) MoveLight() di chuyển nguồn sáng tới vị trí xác định tham số Cú pháp : object.filters.light.MoveLight (light, x, y, z, absolute) − light : số định danh nguồn sáng − x, y, z : xác định toạ độ nguồn sáng, toạ độ phụ thuộc vào tham số absolute − absolute : có giá trị true false Nếu true đối tượng di chuyển tới vị trí x,y, z Nếu false đối tượng dịch từ vị trí ban đầu với độ dời theo chiều xác định tham số x, y, z b) Ví dụ: Hình 16 bảng I tạo cách dùng filter light theo mã sau img1.filters.light.addpoint(40,30,130,0,255,0,100) img1.filters.light.addpoint(40,30,20,0,255,0,100) img1.filters.light.addpoint(40,30,20,0,255,0,100) II TRANSITION Khái niệm: − Transtion hiệu ứng áp dụng cho đối tượng khoảng thời gian, tương tự filter động, thường dùng để tạo hiệu ứng đặc biệt thay đối tượng đối tượng khác − Transition thường dùng để tạo slide show kèm theo hiệu ứng Nó hỗ trợ Internet Explorer, Netscape sử dụng transition CSS, bỏ qua tất thuộc tính style đối tượng Giống filter, transition ứng dụng cho đối tượng cách dùng CSS hay chương trình javascript Có hai loại transition: − Blend Transiton : tạo hiệu ứng thay đối tượng thứ đối tượng thứ hai − Reveal Transition : thay đối tượng thứ đối tượng thứ hai, áp dụng nhiều hiệu ứng Áp dụng transition CSS : a) Cú pháp blend transition CSS : filter : blendTrans ( Duration=value) value : lượng thời gian tính giây ấn định thời gian cho hiệu ứng tiếp diễn a) Cú pháp cho reaveal transition filter : revealTrans ( Duration = value, Transition = type) type : số từ – 23, loại hiệu ứng transition theo bảng sau : Transition Type Transition Type Box in Vertical blinds Box out Horizontal blinds Circle in Checkerboard Across 10 Circle out Ckeckerboard Down 11 Wipe up Random dissolve 12 Wipe down Split vertical in 13 Wipe right Split vertical out 14 Wipe left Split horizontal in 15 Split horizontal out 16 Strips left down 17 Strips left up 18 Strips right down 19 Strips right up 20 Random bars horizontal 21 Random bars vertical 22 Random (0 22) 23 Áp dụng transition javascript : Cú pháp javascript cho tham chiếu tới transition tương tự filter Phải thiết lập thời gian diễn tiến cho transition : object.style.filter = “blendTrans ( Duration=2)”; Hoặc dùng tập hợp filter : object.filters.bendTrans.Duration = 2; object : tên đối tượng áp dụng transition Thực thi transition : Khi transition xác định, để thi hành transition ta phải chạy chương trình javascript gồm bốn bước : a) Thiết lập trạng thái khởi đầu cho đối tượng b) Dùng phương thức apply() cho đối tượng c) Chỉ định trạng thái kết thúc d) Dùng phương thức Play() để thi hành transition Trạng thái khởi đầu hình ảnh đối tượng trước thực thi transition Có thể trạng thái ẩn hay đối tượng (thuộc tính visiblility hidden hay visible) hay trường hợp hình ảnh () hình ảnh thể file định thuộc tính src Dùng phương thức apply() cho đối tượng : object.filters.transition_type.apply(); : object.filters[ i ].apply(); − object : tên đối tượng − trasition_type : blendTrans hay revealTrans − i số filter tính từ Nếu có filter cho đối tượng ta viết object.filters[0].apply() Tập hợp filter xem bao gồm filter transition.Sử dụng phương thức apply () không thực chạy transition, ta cần phải định trạng thái kết thúc đối tượng Chỉ định trạng thái kết thúc : Nếu ta muốn transition chuyển đối tượng từ trạng thái ẩn (hidden) ban đầu sang trạng thái (visible) ta phải định trạng thái kết thúc đối tượng Nếu transition dùng đổi hình hình khác, định trạng thái kết thúc lệnh javascript cho biết file hình cho đối tượng Ví dụ: tạo transition cho đối tượng hình ảnh : # img1{filter : revealTrans( Duration=2, Transition=6 ) } function swapit () { img1.filters.revealTrans.apply(); img1.src = “image2.jpg”; img1.filters.revealTrans.play(); } Ví dụ: function transition1() { var arr=new Array(4); arr[0]="image/Blue hills.jpg" arr[1]="image/Sunset.jpg" arr[2]="image/Water lilies.jpg" arr[3]="image/Winter.jpg" i=Math.round(Math.random()*3) img1.filters.revealTrans.transition=23; img1.filters.item(0).apply(); img1.src=arr[i]; img1.filters.item(0).play(); setTimeout("transition1()",4000) } >... thôngdụng − Alpha(Opacity : 0-1 00, Style : 0,1,2,3 ):Bộ lọc suốt • opacity từ (trong suốt) tới 100 (bình thường) • Style kiểu lọc − Blur(Direction: 0-3 60, Strength: 1-1 00, Add :0/1) (cộng hình gốc)Bộ... trạng thái kết thúc đối tượng Chỉ định trạng thái kết thúc : Nếu ta muốn transition chuyển đối tượng từ trạng thái ẩn (hidden) ban đầu sang trạng thái (visible) ta phải định trạng thái kết thúc... transition ta phải chạy chương trình javascript gồm bốn bước : a) Thiết lập trạng thái khởi đầu cho đối tượng b) Dùng phương thức apply() cho đối tượng c) Chỉ định trạng thái kết thúc d) Dùng phương