công nghệ website - chương xviii_2010 filter và transition

FILTER Filter là hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web để thay đổi sự thể hiện của nó.. Một số filter thông dụng quầng sáng quanh đối tượng – Strength: độ rộn

FILTER VÀ

TRANSITION

I FILTER

Filter là hiệu ứng đặc biệt được áp dụng cho một

đối tượng trong trang web để thay đổi sự thể hiện của nó Hiệu ứng này chỉ được Internet Explorer

hỗ trợ

 2 Cách tạo:

– Dùng CSS

– Dùng Javascript

II TẠO FILTER

III Một số filter thông dụng

– Direction: chiều làm nhoè tính theo góc,

– strength chỉ độ nhoè mạnh hay yếu

III Một số filter thông dụng

Ví dụ:

<img border = "0" src = "van.gif" width = "110"

height= "120" style= "filter: alpha (opacity =

90, style = 2)">

<img border="0" src="van.gif" width="110"

height="120" style=" filter: blur (strength =

10) " >

III Một số filter thông dụng

 Chroma(color :#rrggbb):Làm cho màu chỉ định

bởi color bị mất đi

Tạo bóng đổ xuống mặt phẳng phía dưới

– OffX và OffY tính bằng pixel là chênh lệch theo toạ độ x và y của hình gốc và bóng đổ

 FlipH( ):Lật hình theo chiều ngang

 FlipV( ):Lật hình theo chiều đứng

III Một số filter thông dụng

quầng sáng quanh đối tượng

– Strength: độ rộng quầng sáng tính bằng pixel

– Color: xác định màu

 Gray(): Thể hiện đối tượng theo thang độ xám

 Light():Tạo các nguồn sáng để chiếu sáng đối

tượng

III Một số filter thông dụng

định bởi Color

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

của film X quang

III Một số filter thông dụng

object.style.filter = “filter_name(parameters)”

– object : tên của của đối tượng trong trang

– Nếu muốn kết hợp nhiều filter trong trang, ta phải phải phân cách chúng với nhau bằng dấu chấm phẩy

III Một số filter thông dụng

III Một số filter thông dụng

 Có thể sử dụng cách khác là xem filter như một

phần của mô hình đối tượng, các tham số như là thuộc tính của đối tượng filter

object.filters.filter_name.filter_parameter = value.

– object : tên của đối tượng

– filter_name:tên của filter áp dụng cho đối tượng

– filter_parameter :tên của một trong những tham

số của đối tượng

III Một số filter thông dụng

Ví dụ:

<div id=logo style=”position:absolute;

filter:dropShadow(color:#ff0000 offx=5 offy=5)”> TIN NHANH </div>

 Dùng script để biến đổi màu của bóng đổ từ màu

đỏ sang màu xanh :

<script>

logo.filters.DropShadow.Color = "#0000ff" ;

</script>

III Một số filter thông dụng

 Một đối tượng có thể chứa nhiều filter

Ví dụ: logo.filters truy xuất tới tập hợp filter của

đối tượng

 Trong javascript để truy xuất tới phần tử (chẳng

hạn DropShadow) ta có nhiều cách viết tương đương :

logo.filters.DropShadow

logo.filters[“DropShaDow”]

logo.filters[0]

III Một số filter thông dụng

III Một số filter thông dụng

III Một số filter thông dụng

 Tạo hiệu ứng cuộn với filter (rollover) :

– Dùng Filter có thể tạo hiệu ứng thay đổi thể hiện

của đối tượng khi người dùng tương tác với trang web

ứng glow Khi trỏ chuột ra khỏi dòng chữ thì không có

hiệu ứng filter được áp dụng

III Một số filter thông dụng

– Đối với những hiệu ứng có tham số khi ta thay đổi giá trị của tham số thì thể hiện của đối tượng trong trang web cũng thay đổi theo

– Việc thay đổi tham số ta có thể thực hiện bằng chương trình javascript, nếu việc thay đổi này tiếp diễn liên tục theo thời gian đối tượng sẽ có hiệu ứng filter động

III Một số filter thông dụng

}

else clearInterval (ids);

}

III Một số filter thông dụng

– Để điều khiển nguồn sáng, có 2 phương thức thông dụng là : addPoint() và MoveLight()

III Một số filter thông dụng

 addPoint() thiết lập một nguồn sáng chiếu sáng

đối tượng trên trang web

object.filters.light.addPoint (x ,z, y, r, g, b, strength).

– object : tên của đối tượng

– x,y,z xác định ví trí của nguồn sáng so với gốc toạ độ là ví trí trên, trái của đối tượng

– r,g,b : màu theo hệ màu RGB để xác định màu tổng hợp của nguồn sáng

– strength : xác định độ mạnh của nguồn sáng

III Một số filter thông dụng

 MoveLight() di chuyển nguồn sáng tới vị trí mới

được xác định bởi các tham số

 Cú pháp :

object.filters.light.MoveLight (light, x, y, z, absolute).

– light : là số định danh của nguồn sáng

– x, y, z : xác định toạ độ mới của nguồn sáng, phụ thuộc vào tham số absolute

– absolute : là true thì đối tượng sẽ di chuyển tới

vị trí x,y, z Nếu là false thì đối tượng sẽ dịch đi

từ vị trí ban đầu với độ dời theo 3 chiều được xác định bởi tham số x, y, z

III Một số filter thông dụng

Ví dụ: Hình 16 bảng I có thể được tạo bằng cách

dùng filter light theo mã sau

<body>

<img id=img1 border="0" src="van.gif"

width="110" height="120" style="filter:light()"> <script language=javascript>

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) </script>

<body>

IV TRANSITION

– Transtion là hiệu ứng áp dụng cho một đối tượng trong một khoảng thời gian, tương tự như filter động, thường dùng để tạo một hiệu ứng đặc biệt khi thay thế một đối tượng này bằng một đối tượng khác

– Transition thường dùng để tạo một slide show kèm theo hiệu ứng Nó chỉ được hỗ trợ bởi Internet Explorer, trong Netscape khi sử dụng transition bằng CSS, nó sẽ bỏ qua tất cả thuộc tính style của đối tượng

IV TRANSITION

 Có hai loại transition:

– Blend Transiton : tạo hiệu ứng thay thế dần

dần đối tượng thứ nhất bằng đối tượng thứ hai

– Reveal Transition : khi thay thế đối tượng thứ

nhất bằng đối tượng thứ hai, và có thể áp dụng một trong rất nhiều hiệu ứng

IV TRANSITION

filter : blendTrans ( Duration=value).

– value : lượng thời gian tính bằng giây ấn định

thời gian cho hiệu ứng tiếp diễn

IV TRANSITION

Transition Type Transition Type

Box out 1 Horizontal blinds 9 Circle in 2 Checkerboard Across 10 Circle out 3 Ckeckerboard Down 11 Wipe up 4 Random dissolve 12 Wipe down 5 Split vertical in 13 Wipe right 6 Split vertical out 14 Wipe left 7 Split horizontal in 15

IV TRANSITION

Split horizontal out 16

IV TRANSITION

Cú pháp trong javascript cho tham chiếu tới

transition tương tự như đối với 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 của đối tượng áp dụng transition

IV TRANSITION

 Thực thi một transition :Khi transition được xác

định, để thi hành transition phải chạy chương trình javascript gồm bốn bước :

– Thiết lập trạng thái khởi đầu cho đối tượng

– Dùng phương thức apply() cho đối tượng

– Chỉ định trạng thái kết thúc

– Dùng phương thức Play() để thi hành transition

 Trạng thái khởi đầu là hình ảnh của đối tượng trước khi thực thi transition

– object : tên đối tượng

– trasition_type : blendTrans hay revealTrans

– i là chỉ số của filter tính từ 0

 Nếu chỉ có một filter cho đối tượng thì có thể viết

object.filters[0].apply()

IV TRANSITION

 Chỉ định trạng thái kết thúc :

– Nếu ta muốn transition chuyển một đối tượng từ trạng thái ẩn (hidden) ban đầu sang trạng thái hiện (visible) thì ta phải chỉ định trạng thái kết thúc là hiện đối tượng

– Nếu transition dùng đổi một hình bằng một hình khác, thì chỉ định trạng thái kết thúc bằng lệnh javascript cho biết file hình mới cho đối tượng

IV TRANSITION

<head><script>

function swapit ()

{ img1.filters.revealTrans.apply(); img1.src = “image2.jpg”;

img1.filters.revealTrans.play(); }

IV TRANSITION

<body onLoad="transition1()">

<img src="image/Blue%20hills.jpg" name="img1"

width="100" height="100" id="img1"

style="filter:revealTrans(Duration=5,Transition=23)"></p>

</body>

</html>