Sử dụng hiệu ứng Animate để điều hướng trang web

0
277

[VIDEO TUT]

  • Đang cập nhật…

1. Giới thiệu

  • Như các bạn đã biết animate thực hiện một hành động của người dùng trong html để tạo hiệu ứng chuyển động. Có rất nhiều trang web sử dụng thuộc tính này của jquery và hôm nay tôi xin giới thiệu với các bạn

2. Demo

  • Đầu tiên tôi sẽ đặt class cho menu của tôi là “home1” để có thể triệu gọi vào hàm xử lí của jquery

  • Ở đây tôi chỉ hướng dẫn các bạn cách xử lí nên việc tạo menu các bạn hãy tự làm nhé. Chúng ta sẽ bắt đầu với Jquery:

  • Ở trong đoạn mã này thì tôi sẽ sử dụng sự kiện click thì khi ta ấn vào mục menu nào thì nó sẽ đến nơi mà ta đã chọn cho nó trước. Để làm được như vậy thì ta phải tạo địa chỉ đích đến cho nó:

  • Đích đến của nó ở đây là thẻ <href=”Ten_id(Class)_cua_ban”> thì trong ví dụ trên đích đến của tôi là “test”
  • Ở hàm xử lí jquery ở trên thì e.preventDefault(); sẽ giúp xóa bỏ thuộc tính của thẻ a
  • Và pos = $(name).position().top; có tác dụng lấy vị trí của trang web với biến name các bạn đã đặt
  • $(‘html,body’).stop().animate({scrollTop:pos},600,’easeInQuart’); Sẽ đặt thời gian cho chuyển động đến vị trí đã định khi bạn nhấm vào thanh menu

3. Hiển thị trên trình duyệt

  • Click vào ABOUT ME

1

  • Lập tức chạy tới vị trí được chọn

1

4. Lời kết

  • Như vậy là tôi đã hướng dẫn cho các bạn cách lấy tọa độ của trang web với hiệu ứng animate. Hi vọng các bạn sẽ áp dụng vào được bài tập của mình. Xin chào và chúc các bạn học tốt

Tác Giả : Hà Trần Vietpro

[Total: 1    Average: 2/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here