-
Ok, giờ chắc là bạn đang tự băn khoăn
-
xem nền dùng setInterval
-
hay là requestAnimationFrame
-
trong hình động của mình.
-
Nhưng mà tôi sẽ đưa cho bạn
-
thêm nguyên một lựa chọn nữa.
-
Trong Chrome, Firefox và IE 10 trở lên,
-
có một cách sử dụng CSS
-
để tạo hình động mà không phải dùng
-
tí JavaScript nào cả.
-
Ta sẽ bỏ hết đoạn code này đi
-
và thử tạo hình Oh Noes động kiểu CSS.
-
Tôi sẽ biến toàn bộ đoạn này
-
thành comment.
-
Ta bắt đầu với việc tạo style cho trang này,
-
rồi thêm một cái mà trông giống
-
như CSS, nhưng thực ra là
-
để làm hình động.
-
Viết @keyframes... rồi tên của
-
ảnh động này... là getbigger...
-
rồi dấu ngoặc móc.
-
Để tạo một ảnh động đơn giản, từ
-
trang thái này chuyển động tới trạng thái khác,
-
ta sẽ định nghĩa trạng thái bắt đầu (from) và trạng thái kết thúc (to).
-
Ở tron from{}, ta sẽ viết
-
các thuộc tính CSS lúc khởi điểm.
-
Bạn còn nhớ, ta đặt kích thước ban đầu là 50px.
-
Trong to{}, ta viết
-
thuộc tính của ảnh này khi kết thúc.
-
Hình như lúc kết thúc là 300px,
-
bạn nhớ không?
-
Giờ ta đã định nghĩa ảnh động này rồi,
-
ta cần báo cho trình duyệt biết xem element nào
-
sẽ chuyển động như thế,
-
nên là ta sẽ viết thêm CSS kiểu bình thường
-
cho ohnoes.
-
Trong này, ta ghi ra tên của hình động,
-
tức là getbigger,
-
rồi đến thời gian chuyển động,
-
là 3 giây.
-
Với một vài trình duyệt thì
-
bạn có thể viết thế này là
-
xong ngon lành rồi.
-
Nhưng trong các trình duyệt khác,
-
như là Safari hay Chrome,
-
thì chưa được đâu.
-
Lí do là vì một cái gọi là vendor prefixes.
-
Tức là khi trình duyệt bắt đầu
-
cho phép sử dụng một tính năng mới,
-
người ta đặt vendor prefix vào trước tên của tính năng đó,
-
để thấy là tính năng này chưa hoàn thiện, có thể còn được sửa đổi,
-
đây mới là bản chưa hoàn chỉnh
-
của tính năng đó.
-
Như vậy, để sử dụng tính năng này trong Chrome
-
nếu mà Chrome bạn thử với Chrome vẫn chưa được, thì bạn cần viết lại
-
những gì ta đã viết kia,
-
và thêm cái vendor prefix, tức là webkit, lên đằng trước.
-
Vậy ta viết lại đoạn này
-
và thêm -webkit- vào đây.
-
Rồi ta viết lại đoạn này nữa
-
và thêm -webkit- vào.
-
Whoa, hay rồi!
-
Giờ thì ảnh này chuyển động được trên tất cả các tình duyệt rồi.
-
Mong là khi bạn xem hướng dẫn này thì
-
không cần phải dụng cái vendor prefix này nữa,
-
nhưng mà bạn vẫn nên biết cách dùng,
-
bởi vì có khi lại cần dùng
-
với một tính năng mới khác trong tương lai.
-
Còn một cách khác dùng CSS
-
để tạo hình động,
-
đó là thuộc tính transition.
-
Thuộc tính này khiến trình duyệt chuyển đổi
-
từ một giá trị thuộc tính ban đầu tới một giá trị khác.
-
Ví dụ nếu ta muốn font-size
-
của số đếm giây kia to dần lên khi
-
người dùng di chuột vào số đó,
-
ta có thể làm với JavaScript
-
bằng cách tạo một event listener
-
cho event mouse-over,
-
rồi dùng requestAnimationFrame()
-
để tăng font-size dần lên,
to increase the font
-
nhưng ta cũng có thể làm thế chỉ với CSS thôi.
-
Nghĩ xem nào.
-
Thường thì ta làm sao để biến font-size
-
thành to hơn khi di chuột mà chỉ dùng CSS?
-
Ta có thể dùng hover.
-
Ta viết #countdown:hover...
-
rồi đến font-size:150px.
-
-
-
cho biết quá trình chuyển đổi mất bao lâu,
-
sử dụng hàm tính thời gian thế nào.
-
Vậy ta viết transtion; font-size 1s linear;
-
Giờ bạn hãy dừng video
-
và thử di chuột qua dòng chữ xem có gì không.
-
Nếu bạn dùng Chrome, Firefox hoặc IE 10 trở lên,
-
thì cỡ chữ sẽ to dần ra rất mượt,
-
bạn không cần vendor prefix gì cả
-
với kĩ thuật này.
-
Còn rất nhiều thứ bạn có thể làm
-
để tạo ảnh động bằng CSS,
-
và các trình duyệt bây giờ cũng
-
hỗ trợ những tính năng này khá tốt.
-
Vậy nên tôi khuyến khích bạn nên tỉm hiểu
-
thật kĩ hơn về những tính năng này
