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

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

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

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

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

Có rất nhiều lúc chúng ta muốn thêm/xóa một element trên trình duyệt, nó rất chi là trực quan dễ dàng với jQuery, tuy nhiên vì không còn đụng chạm trực tiếp vào DOM, việc đơn giản đó lại hơi kỳ công // những ngày xa xưa ấy còn đâu $("#my-element").fadeIn("slow"); Tại sao lại khó khăn ấy nhỉ? Hãy mường tượng nó qua một ví dụ /* styles.css */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } // index.js const App = ({ show = true }) => ( show ? <div style={{ animation: `fadeIn 1s` }}>HELLO</div> : null ) Đó là tất cả những gì chúng ta cần làm để animate lúc component đang mount với fadeIn, tuy nhiên lại không có cách nào để animate unmount, vì chúng ta đã xóa cái DOM ngay khi show chuyển thành false. Element đã ra đi ngay lập tức. Tuyển dụng lập trình viên React Vậy chúng ta cần làm gì show thay đổi, báo react khoan hãy unmount, delay nó lại một chút Chạy animate Animate vừa chạy xong, unmount Đây là cách làm đơn giả [...]

Sau cả ngàn project thì chắc chắn anh em cũng muốn có một cái gì đó nhìn cho đẹp đẹp, cho mát mắt. Level sử dụng phức tạp đi kèm với load animation đẹp thì đỉnh không còn gì bằng! Giới thiệu cho anh em source 9 bộ CSS animation "sịn sò" để apply vào product của mình.  Một số animation bên dưới interactive được, chỉ cần rà chuột và click vào nhé. 1. Loading indicator "sịn" (chỉ trên CSS)  See the Pen Oddly satisfying loading indicator (CSS only) by eight (@eight) on CodePen. 2. CSS animation ảo See the Pen Oddly satisfying CSS Only animation by eight (@eight) on CodePen. 3. "Mờ mờ nhân ảnh"...   4. Loading style Lửa trại  See the Pen campfire by ByteKnight (@byteknight) on CodePen. 5. Style pastel dots See the Pen growing pastel dots by Rachel Smith (@rachsmith) on CodePen. 6. Lines cầu vồng See the Pen Rainbow lines by ByteKnight (@byteknight) on CodePen. 7. Style thôi miên See the Pen Mesmerizing by xposedbones (@xposedbones) on CodePen. 8. Animation Test See the Pen Animation Test - Creeper Lines animated by xposedbones (@xposedbones) on CodePen. 9. Style "Musical background" theo rà chuột  See the Pen Musical background on mousemove by ByteKnight (@byteknight) on CodePen. Hi vọng rằng tất cả các animation "độc" [...]

Khi UX tốt không chỉ đến từ 1 thiết kế đẹp Đến 90% người dùng sử dụng ứng dụng do hiệu suất kém, 86% người dùng xoá ứng dụng khi gặp phải vấn đề thiết kế hay chức năng. Ngược lại, có đến 86% người dùng đánh giá cao những ứng dụng có trải nghiệm đặc biệt. Từ những con số này, không khó để hiểu được lý do tại sao các công ty tập trung vào User Experience như Apple, Google, Adobe, Dropbox và Amazon vẫn luôn dẫn đầu trong lĩnh vực của họ. UX – hay còn gọi là trải nghiệm người dùng (User experience) – là cách mà người dùng cảm nhận về một sản phẩm cụ thể, cách họ sử dụng sản phẩm đó. Người làm về UX gọi là UX Designer. Họ là những người nghiên cứu và đánh giá về thói quen, cách mà một người khách hàng sử dụng và cảm nhận về 1 hệ thống (Sử dụng hệ thống thông qua UI). Sử dụng và cảm nhận ở đây đơ [...]

“Designing for delight is designing for moments. The animation will be an effective way to create those moments better.” Nghiên cứu chỉ ra rằng có đến 90% người dùng đã ngừng sử dụng một ứng dụng do hiệu suất kém, 86% người dùng đã xóa bỏ một ứng dụng khi họ gặp phải vấn đề về thiết kế hay chức năng. Ngược lại, có đến 86% người dùng đánh giá cao những ứng dụng có trải nghiệm đặc biệt. Từ những con số này, không khó để hiểu được lý do tại sao các công ty tập trung vào User Experience như Apple, Google, Adobe, Dropbox và Amazon vẫn luôn dẫn đầu trong lĩnh vực của họ. ❌ Đừng đánh giá thấp Animation của ứng dụng khi bạn chưa biết những điều sau: + Người dùng có thể thư giãn nếu App bạn đang load + Sự chuyển động sẽ giúp người dùng tập trung hơn vào đối tượng cần chú ý. + Sự kết nối mạch lạc khiến người dùng thích thú. + Làm nổi bật lỗi khi thông bá [...]

Biểu đồ miêu tả tình trạng web animation hiện nay với các thư viện, frameworks và plugins hay nhất dựa trên tính linh hoạt và hiệu suất hoạt động. Infographic 1: Biểu đồ Web Animation Infographic này được chia thành 3 phần. Phần đầu tiên gồm 1 vài thư viện animation cung cấp tất cả công cụ từ các hàm easing và callbacks đến timing control, có cả animation functions chung. Chúng tôi đã tách riêng các thư viện sử dụng CSS3 transition để các elements sinh động hơn, thay vì dùng các thư viện sử dụng Javascript. Chúng tôi cũng tách các thư viện hướng tới các animations dành cho SVG, WebGL hoặc HTML5 Canvas. Infographic 2: Danh sách các tools Phần thứ 2 tập trung vào nhiều methods khác nhau để các yếu tố UI và các đối tượng khác trong DOM sinh động hơn như animation cuộn, parallax, sprites, 3D transformations, physics engines và transitions. Infographic 3: Các mẹo hiệu suất Infographic cuối chỉ ra vài mẹo cơ bản giúp bạn lựa chọn giữa animation dựa [...]