Bài tập javascript 10 – Xử lý hiệu ứng cuộn chuột của trang kênh14 phần 2

0
349

bài tập javascript 10 này, mình sẽ tiếp tục xử lý hiệu ứng cuộn chuột. Ở bài trước mình có bỏ sót một chi tiết nhỏ, mình sẽ xử lý nốt trong bài viết này. Và chúng ta sẽ làm thêm hiệu ứng animation khi cuộn chuột, mình xin được bắt đầu luôn :D.

hiệu ứng cuộn chuột

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

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM
  6. Bắt sự kiện cuộn chuột

Bài tập javascript 10 – Xử lý hiệu ứng cuộn chuột của trang kênh14 phần 2

Mô tả bài tập: Khi lăn chuột xuống thanh menu đổi sang màu đen, lăn chuột đến khối cam trên màn hình thì nó sẽ di chuyển đến một vị trí xác định rồi biến mất. Khi đó sẽ xuất một khối đen chuyển động từ dưới lên đồng thời một dòng text hiện ra.

Để khối cam dừng tại vị trí của khối đen mình sẽ khởi tạo thêm một biến chancuoi = chieucaobenphai + 670 670 là khoảng cách mà khối cam sẽ di chuyển. Sau đó bỏ thêm vào điều kiện của câu lệnh if là được rồi. Còn cái hiệu ứng kế tiếp mình sẽ giải thích sau khi code file js.

Demo:

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

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

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

Code: html

Mình chỉ thêm một khối benphai-4 và chứa dòng text Hello everybody.

Code css:

 

So với bài tập trước thì mình có đặt thêm css cho khối benphai-4 và thêm 2 class hieuung và hieuungtxt để tạo hiệu ứng cho khối benphai-4 sau khi scroll chuột đến.

Code js:

Kết quả: 

bài tập javascript

File js : mình chỉ giải thích cái hiệu ứng của khối benphai-4 thôi nha.

  • Truy xuất phần tử của khối và thẻ h4
  • Lấy chiều cao của khối bằng phương thức offsetTop ở đây thì minhf phải trừ đi một khoảng cách để có hiệu ứng theo ý muốn của mình.
  • Sau đó là add và remove class thôi
  • Cuối cùng là xử lý css với animation

Vậy là mình đã làm xong Bài tập javascript 10 – Xử lý hiệu ứng cuộn chuột của trang kênh14 phần 2 rồi. Đây là những ứng sử dụng rất nhiều hiện nay. Tuy nhìn đơn giản vậy thôi nhưng khi xử lý những thuộc tính css phức tạp hơn thì nhìn rất đẹp đấy. Vì đây là bài hướng dẫn cơ bản nên mình không thực hiện quá phức tạp css . Chúng ta đang học javascript mà :D. 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