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