[Mã code 48892]

Source code Nextjs animated portfolio template

  (1 Đánh giá)
  0       153    

Template này cung cấp hướng dẫn từ cách tạo hiệu ứng CSS snap scroll đến thiết kế thanh navbar và menu hamburger, cùng với các hiệu ứng động như trượt chữ, parallax và liên kết.

Danh mục
Thể loại
Ngày đăng
21-2-2024
Loại file
Full code
File download
 animated-portfolio-master.zip [2.13 MB]
CAM KẾT TỪ NGƯỜI BÁN
Học Nhanh về React Framer Motion
Cách Tạo Hiệu Ứng Cuộn Snap (CSS Snap Scroll)
Hướng Dẫn Sử Dụng Hook useScroll và useTransform của Framer Motion


Source code
5

Đánh giá (9)
5/5

Ngày tham gia
17/2/2024

 

Chúng tôi đang phát triển một dự án website cá nhân hoặc cơ sở dữ liệu với sự hỗ trợ của React.js (Vite) và scss 

Dưới đây là một số tính năng và phần của dự án mà chúng tôi đã hoàn thành hoặc đang làm việc:

  1. Cách Tạo Hiệu Ứng Cuộn Snap (CSS Snap Scroll)
  2. CSS Toàn Cầu
  3. Thiết Kế Navbar
  4. Khóa Học Nhanh về React Framer Motion
  5. Thanh Bên (Hiệu Ứng Hamburger Menu)
  6. Làm Thế Nào Để Cuộn Mượt Giữa Các Phần HTML?
  7. Hiệu Ứng SVG của Nút Menu Hamburger
  8. Hiệu Ứng Liên Kết Trong Menu Thanh Bên
  9. Thiết Kế Phần Hero Động
  10. Hiệu Ứng Trượt Chữ với Framer Motion
  11. Hướng Dẫn Parallax với Framer Motion
  12. Hướng Dẫn Sử Dụng Hook useScroll và useTransform của Framer Motion
  13. Thiết Kế Phần Dịch Vụ
  14. Cách Tạo Hiệu Ứng Khi Hiển Thị (Sử Dụng Hook useInView của Framer Motion)
  15. Thiết Kế Phần Portfolio Động
  16. Thanh Tiến Trình Động với Framer Motion
  17. Làm Thế Nào Để Tạo Hiệu Ứng Cho Các Phần Khi Cuộn?
  18. Thiết Kế Phần Liên Hệ
  19. Làm Thế Nào Để Gửi Thư Trong React?
  20. Con Trỏ Chuột Động Trong React
  21. Thiết Kế Đáp Ứng Cho Thiết Bị Di Động

Với các tính năng và hướng dẫn này, dự án của chúng tôi hứa hẹn mang đến một trải nghiệm trực tuyến thú vị và độc đáo cho người dùng.


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO


portfolio,Source code Website,Source code NodeJs,template,htmlcss,reactjs

portfolio,Source code Website,Source code NodeJs,template,htmlcss,reactjs

portfolio,Source code Website,Source code NodeJs,template,htmlcss,reactjs

portfolio,Source code Website,Source code NodeJs,template,htmlcss,reactjs

portfolio,Source code Website,Source code NodeJs,template,htmlcss,reactjs


HƯỚNG DẪN CÀI ĐẶT

Đây là một dự án React.js được khởi tạo với create-next-app.

Cài đặt thư viện: npm i

Bắt đầu Đầu tiên, chạy máy chủ phát triển:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Mở http://localhost:3000 trên trình duyệt của bạn để xem kết quả.




Nguồn: Topcode.vn

BÌNH LUẬN (0)


ĐÁNH GIÁ (1)

ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
13:30 - 21/2/2024
Code rất tốt
Code rất tốt và phù hợp để phát triển
HỖ TRỢ TRỰC TUYẾN