Bài tập javascript 7 – Viết hiệu ứng cho menu side bar phần 3

0
296

bài tập javascript 7 này, chúng ta sẽ làm tiếp các hiệu ứng chuyển động cho menu side bar. Mình sẽ sử dụng các thuộc tính CSS 3D transform  trong css để thực hiện bài tập này. Đã 3D thì sẽ ảo lòi rồi đúng không :D. Nhưng code trrong file js thì cũng khá đơn giản thôi.

bài tập javascript 7

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 7: Viết hiệu ứng cho menu side bar phần 3

Mô tả bài tập: Click 1 lần vào button thì thanh menu hiện từ trái ra đồng thời một khối đen hiện lên và màn hình trắng quay phải 1 góc xx độ tạo ra hiệu ứng 3D. Khi ta click vào khối đen thì menu và khối đen biến mất đồng thời màn hình trắng trở lại bình thường.

Demo:

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

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

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 7 - Viết hiệu ứng cho menu side bar phần 3 1

File js :

  • Vẫn là  truy xuất phần tử và add , remove class thông thường thôi đúng không :D.
  • Bài tập này thì truy xuất thêm class “manhinhquay” nữa là ok rồi.

Hoàn toàn giống bài tập trước ở bài tập này chúng ta chỉ cần đặt thêm background-color:gray' cho body  và thêm một số thuộc tính perspective:3000px overflow: hidden. Mình sẽ không giải thích chi tiết các thuộc tính css nha vì cái này có trên w3chool cả rồi. Nhớ lại một class “manhinhtrangquay” vào CSS nữa nhé cái này để lúc click sẽ add nó vào. Trong class “manhinhquay” ta sẽ đặt các thuộc tính 3D transform -origin: 100% 0% transform: rotateY(-25deg); Vậy là chúng ta đã xử lý xong bài tập này rồi đấy.

Vậy là mình đã xử lý xong Bài tập javascript 7 – Viết hiệu ứng cho menu side bar phần 3 rồi nhé :D. Mình sẽ quay trờ lại với những hiệu ứng khác, mình xin được dừng bài viết tại đây.

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

avatar
  Subscribe  
Notify of