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

0
131

bài tập javascript 6 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 thuộc tính transform:scale() trong css để làm bài tập này. Đây là một thuốc tính khá ảo diệu, mình xin được bắt đầu :D.

bài tập javascript 6

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

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 nhỏ lại  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:

Click vào bài tập js 6 để 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

File js :

  • Chỉ là  truy xuất phần tử và add , remove class thông thường thôi đúng không :D. Nếu bạn nào chưa biết thì đọc lại những bài tập trước của mình nhé.
  • Bài tập này thì truy xuất thêm class “manhinhtrang” 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 khối div có class là “manhinhtrang” có width và height là 100%. Sau đó chia lại z-index và chỉnh lại vị trí của các khối bằng position . Nhớ là thêm một class “manhinhtrangscale” vào CSS nữa nhé cái này để lúc click sẽ add nó vào. 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 6 – Viết hiệu ứng cho menu side bar phần 2 rồi nhé :D, chúng ta sẽ viết thêm một bài về menu sidebar này nữa đó là sử dụng thuộc tính css 3D transforms đê thực hiên. 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  
Notify of