Bài tập javascript 12 – Viết hiệu ứng chuyển slide kết hợp chuyển động animation

1
678

bài tập javascript 12 này, mình sẽ tạo thêm chuyển động animation khi chuyển slide. Ở bài trước thì mình đã viết hiệu ứng chuyển slide rồi, bây giờ chúng ta chỉ cần xử lý thêm phần html và css nữa là ổn. Hiệu ứng này khá đẹp đấy 😀 mình xin được bắt đầu bài viết.

chuyển động animation

Kiến thức cần có:

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM

Bài tập javascript 12 – Viết hiệu ứng chuyển slide kết hợp chuyển động animation

Mô tả bài tập: click vào một chấm thì chuyển sang slide khác, đồng thời các vật thể khác bay ra 😀

Demo:

Click vào bài tập js 12 để xem kết quả.

Mình xin 5 phút quảng cáo nha =))

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

Code: CSS

Code js:

Kết quả:

bài tập javascript

File js:

  • Ở đây thì chỉ có truy xuất phần tử thông thương thôi, cũng không có gì mới.
  • Chú ý của bài tập này là chúng ta cần đặt cái class cho thằng slide 1 để nó hiện thị khi chưa click.

File css: bài này xử lý css animation là chính nên mình sẽ giải thích file css

  • Chú ý sử dụng thuộc tính overflow: hidden để bỏ những phần thừa của các img tam giác
  • Đặt z-index để hiển thị các layer
  • Đặt position:relative để di chuyển vị trí các slide
  • Còn gì nữa không ta ak mấy cái animation cũng đơn giản thôi, đầu tiên thì chúng ta sẽ đặt opatity cho nó bằng không rồi viết animation là được mà.

Okê xong rồi đấy ! Vậy là mình đã xử lý xong Bài tập javascript 12 – Viết hiệu ứng chuyển slide kết hợp hiệu ứng chuyển động animation. Nếu thắc mắc gì cứ để lại comment bên dưới nhé. Mình sẽ quay trở lại với bài tập khác. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
newest oldest most voted
Notify of
Hoàng Linh
Guest
Hoàng Linh

quá tuyệt luôn hihi