1 job2D Animator

[Remote] Motion Designer
Sisu Network
Fresher
Remote
(Remote)
2D Animator
Posted 1 week ago

View all

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 [...]

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( [...]

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ô [...]

Tạo một animation cho component trong React

Sử dụng React, styled-components, react-flip-toolkit để tạo animation giống như mên trên trang chủ của Stripe Phân tích See the Pen React Stripe Menu Before Animation by Alex (@aholachek) on CodePen. Trước tiên phân tích cái animation này ra thành nhiều phần để dể hình dung. Có thể xem dạng slow motion trên Codepen để xem nhé. container dropdown màu trắng sẽ thay đổi kích thước và vị trí background màu xám ở phía dưới của dropdown transition độ cao Khi di chuyển chuột khỏi dropdown, fade out nội dung trước đó đi và chuyển vị trí nó sang element mới, sau đó đưa nội dung mới lên. Tìm việc React lương cao trong tháng up to 25M Một vài lưu ý khi làm animation với React, cứ để browser quản lý layout. Thay vì sử dụng các dropdown khác nhau, chúng ta dùng 1 dropdown và thay đổi vị trí của nó, dùng Flip technique để giả lập như có 3 dropdown khác nhau. Dựng component thô chưa có animate See the Pen React Stripe Menu Before Animation by Alex (@aholachek) on CodePen. Để bắt đầu ta dựng một component navbar sử dụng styled-component Ở đây thì chưa [...]