Tìm kiếm

ReactJS
Tất cả
Việc làm
Công ty

Tạo thông báo việc làm ngay

2 việc làmAnimation 3D

Thông tin công ty

Bài viết liên quan

Xem tất cả
7 thư viện CSS Animation cực hay cho lập trình viên Frontend

7 thư viện CSS Animation cực hay cho lập trình viên Frontend

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Đối với lập trình viên frontend, việc tạo hiệu ứng và hoạt ảnh trên trang web là một phần quan trọng của việc tối ưu hóa trải nghiệm người dùng. Có nhiều thư viện mạnh mẽ giúp lập trình viên thực hiện công việc này một cách dễ dàng và hiệu quả. 1. Animate.css Animate.css là một thư viện animation CSS nhẹ và dễ sử dụng, giúp thêm hiệu ứng vào các phần tử HTML một cách nhanh chóng. Với nhiều loại hiệu ứng như bounce, fadeIn, zoomIn, thư viện này mang lại sự linh hoạt và đa dạng cho trang web của bạn. Sử dụng CDN để nhúng Animate.css <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> Sử dụng hiệu ứng <div class="animate__animated animate__bounce">Chào mừng bạn đến trang web!</div> 2. GSAP (GreenSock Animation Platform) GSAP là một thư viện animation mạnh mẽ, cung [...]

Đọc thêm
3D Artist Là Gì? Các Mức Lương Hấp Dẫn Trong Nghề 3D Artist

3D Artist Là Gì? Các Mức Lương Hấp Dẫn Trong Nghề 3D Artist

Nghề 3D Artist cũng được xem là họ hàng chung của “Art” trong giới mỹ thuật nhưng khác với “Art”, người nghệ sĩ có thể diễn đạt, trình bày những tác phẩm của họ ở bất cứ đâu thì “3D Artist” chỉ có thể được những người nghệ sĩ thể hiện trên các hình ảnh máy tính, được tạo nên nhờ những công cụ phần mềm hỗ trợ. Có thể nói những tác phẩm của một dân trong “Nghề 3D Artist” được tạo nên từ những dòng thuật toán trên nền tảng dữ liệu.  Nghề 3D Artist là gì? 3D Artist là một nhà thiết kế đồ họa chuyên biệt, họ là những người thông thạo công nghệ máy tính và phần mềm thiết kế mới nhất. Với một 3D Artist, trách nhiệm và nghĩa vụ của bạn bao gồm thiết kế và tạo hoạt ảnh 3D cho các ngành khác nhau bao gồm ứng dụng di động, y học, khoa học, trò chơi điện tử và [...]

Đọc thêm
Hướng dẫn kỹ thuật FLIP animation với React

Hướng dẫn kỹ thuật FLIP animation với React

Bài viết được sự cho phép của tác giả Lưu Bình An Trước đây mình đã có một bài về FLIP animation, các bạn có thể đọc lại ở đây để biết kỹ thuật này là gì và tại sao nó lại giúp tối ưu tốc độ. [irp posts="14654" name="9 CSS animation mới mãn nhãn" cho các project"] [irp posts="13043" name="Animation - dụng cụ “vàng” trong làng UX"] Có thể tóm tắt kỹ thuật FLIP bằng hình minh họa bên dưới Những gì trong ô màu tím, cần diễn ra trước sự kiện paint của trình duyệt. Tuyển dụng lập trình viên React lương cao cho bạn Để đạt mục đích transform trước khi trình duyệt thực hiện paint, chúng ta sẽ sử dụng useLayoutEffect, những gì diễn ra ở đây sẽ xảy ra sau khi DOM cập nhập, trước khi paint Với lần render đầu tiên, chúng ta cần cache lại vị trí cuối cùng của animation useEffect(() => { // ... const rects = useRef(new Map()).current; const squares = document.querySelectorAll('.square'); for (const square of squares) { rects.set( [...]

Đọc thêm
Hướng dẫn inspect animation với Chrome DevTools

Hướng dẫn inspect animation với Chrome DevTools

Bài viết được sự cho phép của tác giả Lưu Bình An Ấn Ctrl + Shift + I để mở Chrome DevTools. Nhìn lên góc phải, chỗ có 3 dấu chấm, chọn vào More tools > Animations F5 lại trang để bắt đầu xem phân tích animation Di chuyển nút tròn màu đỏ (gọi là playhead) trên timeline đến vị trí tương ứng với thời gian của animation Mỗi element đang chạy animate sẽ được đại diện bằng một màu line khác nhau. Trên mỗi line này sẽ có các keyframe Delay và Duration 2 thay đổi này sẽ update lại css trên tab Styles Để thay đổi delay, rê chuột lên đường line đến khi nào nhìn thấy trỏ chuột chuyển thành hình bàn tay, kéo rê qua lại để thấy giá trị css được update Tăng duration của animation, rê chuột lên trên keyframe cuối cùng đến khi thấy chuyển thành mũi tên 2 đầu, kéo rê qua lại để tăng hoặc giảm thời gian. Cubic bezier Inspect đến element có animation, phía trước thuộc tính animation, có một ô vuô [...]

Đọc thêm