Trước khi phát triển sự nghiệp, tôi đã làm một loạt công việc đồ họa chuyển động trong After Effects. Nhưng ngay cả với nền đó, tôi vẫn thấy hoạt ảnh trên web khá khó hiểu.
Đồ họa video được thiết kế trong một tỷ lệ cụ thể và sau đó xuất ra ngoài. Xong! Nhưng không có bất kỳ "cài đặt xuất" nào trên web. Chúng tôi chỉ đưa mã ra ngoài thế giới và các hoạt ảnh của chúng tôi phải thích ứng với bất kỳ thiết bị nào mà chúng tiếp cận.
Vì vậy, hãy nói về hoạt ảnh đáp ứng! Làm thế nào để chúng ta tiếp cận tốt nhất với hoạt ảnh trên web hoang dã hoang dã? Chúng ta sẽ đề cập đến một số phương pháp tiếp cận chung, một số mẹo dành riêng cho GSAP và một số nguyên tắc chuyển động. Hãy bắt đầu với một số khuôn hình…
Hình ảnh động này sẽ được sử dụng như thế nào?
Bài viết của Zach Saucier về hoạt ảnh đáp ứng khuyên bạn nên lùi lại một chút để suy nghĩ về kết quả cuối cùng trước khi chuyển sang viết mã.
Hoạt ảnh có phải là một mô-đun được lặp lại trên nhiều phần của ứng dụng của bạn không? Nó có cần phải mở rộng quy mô không? Ghi nhớ điều này có thể giúp xác định phương pháp thu nhỏ hoạt ảnh và giúp bạn không lãng phí nỗ lực.
Đây là lời khuyên tuyệt vời. Một lớn một phần của việc thiết kế hoạt ảnh đáp ứng là biết hoạt ảnh đó có cần mở rộng quy mô hay không và sau đó chọn cách tiếp cận phù hợp ngay từ đầu.
Hầu hết các hoạt ảnh thuộc các loại sau:
- Đã sửa: Hoạt ảnh cho những thứ như biểu tượng hoặc trình tải vẫn giữ nguyên kích thước và tỷ lệ co trên tất cả các thiết bị. Không có gì phải lo lắng về ở đây! Mã hóa một số giá trị pixel trong đó và tiếp tục với ngày của bạn.
- Chất lỏng: Hoạt ảnh cần điều chỉnh linh hoạt trên các thiết bị khác nhau. Hầu hết các hoạt ảnh bố cục đều thuộc loại này.
- Nhắm mục tiêu: Hoạt ảnh dành riêng cho một thiết bị hoặc kích thước màn hình nhất định hoặc thay đổi đáng kể tại một điểm ngắt nhất định, chẳng hạn như hoạt ảnh chỉ dành cho máy tính để bàn hoặc tương tác dựa trên tương tác với thiết bị cụ thể, như chạm hoặc di chuột.
Hoạt ảnh linh hoạt và có mục tiêu yêu cầu các cách suy nghĩ và giải pháp khác nhau. Hãy xem…
Hoạt ảnh linh hoạt
As Chuông Andy nói: Hãy là người cố vấn của trình duyệt chứ không phải người quản lý vi mô - cung cấp cho trình duyệt một số quy tắc và gợi ý vững chắc, sau đó để trình duyệt đưa ra quyết định đúng đắn cho những người truy cập vào nó.
(Đây là những miếng cắt từ bản trình bày đó.)
Hoạt ảnh linh hoạt là để cho phép trình duyệt thực hiện công việc khó khăn. Rất nhiều hoạt ảnh có thể dễ dàng điều chỉnh theo các ngữ cảnh khác nhau chỉ bằng cách sử dụng các đơn vị phù hợp ngay từ đầu. Nếu bạn thay đổi kích thước chiếc bút này, bạn có thể thấy rằng hoạt ảnh bằng cách sử dụng đơn vị khung nhìn quy mô linh hoạt khi trình duyệt điều chỉnh:
Hộp màu tím thậm chí còn thay đổi chiều rộng ở các điểm ngắt khác nhau, nhưng khi chúng tôi sử dụng tỷ lệ phần trăm để di chuyển nó, hoạt ảnh cũng mở rộng theo nó.
Hoạt ảnh các thuộc tính bố cục như left và top có thể gây ra hiệu ứng làm lại bố cục và hoạt ảnh 'vui nhộn', vì vậy nếu có thể dính vào các chuyển đổi và độ mờ.
Tuy nhiên, chúng tôi không chỉ giới hạn ở những đơn vị này - chúng ta hãy xem xét một số khả năng khác.
Đơn vị SVG
Một trong những điều tôi yêu thích khi làm việc với SVG là chúng tôi có thể sử dụng các đơn vị người dùng SVG cho hoạt ảnh phản hồi nhanh. Manh mối ở cái tên thực sự - Khả năng mở rộng Biểu đồ véc-tơ. Trong SVG-land, tất cả các phần tử được vẽ ở các tọa độ cụ thể. Không gian SVG giống như một mảnh giấy đồ thị vô hạn, nơi chúng ta có thể sắp xếp các phần tử. Các viewBox xác định các kích thước của giấy đồ thị mà chúng ta có thể nhìn thấy.
viewBox="0 0 100 50”Trong bản demo tiếp theo này, SVG của chúng tôi viewBox is 100 đơn vị rộng và 50 đơn vị cao. Điều này có nghĩa là nếu chúng ta tạo hiệu ứng cho phần tử bằng cách 100 dọc theo trục x, nó sẽ luôn di chuyển bằng toàn bộ chiều rộng của SVG mẹ của nó, bất kể SVG đó lớn hay nhỏ! Cung cấp cho bản demo thay đổi kích thước để xem.
Tạo hoạt ảnh cho một phần tử con dựa trên chiều rộng của vùng chứa mẹ là một mẹo nhỏ trong HTML-land. Cho đến bây giờ, chúng tôi đã phải lấy chiều rộng của cha mẹ bằng JavaScript, điều này đủ dễ dàng khi bạn tạo hoạt ảnh from một vị trí được chuyển đổi, nhưng hơi khó chịu khi bạn đang tạo hoạt ảnh to ở đâu đó như bạn có thể thấy trong bản demo sau đây. Nếu điểm cuối của bạn là một vị trí được chuyển đổi và bạn thay đổi kích thước màn hình, bạn sẽ phải điều chỉnh vị trí đó theo cách thủ công. Lộn xộn… 🤔
Nếu bạn điều chỉnh các giá trị khi thay đổi kích thước, hãy nhớ sự suy nhược, hoặc thậm chí kích hoạt chức năng sau khi trình duyệt hoàn tất việc thay đổi kích thước. Trình nghe thay đổi kích thước kích hoạt rất nhiều sự kiện mỗi giây, vì vậy việc cập nhật các thuộc tính trên mỗi sự kiện là rất nhiều công việc đối với trình duyệt.
Nhưng, tốc độ tăng tốc hoạt hình này sẽ sớm trở thành dĩ vãng! Làm ơn cuộn trống… 🥁
Đơn vị container! Đồ đáng yêu. Vào thời điểm tôi viết bài này, chúng chỉ hoạt động trong Chrome và Safari - nhưng có thể vào thời điểm bạn đọc, chúng tôi sẽ có Firefox. Hãy xem chúng hoạt động trong bản trình diễn tiếp theo này. Hãy nhìn những cậu bé đi! Điều đó có thú vị không, hoạt ảnh liên quan đến các yếu tố chính!
Dữ liệu hỗ trợ trình duyệt này là từ caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| cơ rôm | Firefox | IE | Cạnh | Safari |
|---|---|---|---|---|
| 105 | Không | Không | 105 | 16.0 |
Điện thoại di động / Máy tính bảng
| Chrome dành cho Android | Firefox dành cho Android | Android | Safari iOS |
|---|---|---|---|
| 106 | Không | 106 | 16.0 |
Chuyển đổi bố cục linh hoạt với FLIP
Như chúng tôi đã đề cập trước đó, trong SVG-land, mọi phần tử được đặt gọn gàng trên một lưới và thực sự dễ dàng di chuyển xung quanh một cách nhạy bén. Trong HTML-land, nó phức tạp hơn nhiều. Để xây dựng bố cục đáp ứng, chúng tôi sử dụng nhiều phương pháp định vị và hệ thống bố cục khác nhau. Một trong những khó khăn chính của việc tạo hoạt ảnh trên web là rất nhiều các thay đổi đối với bố cục là không thể tạo hoạt ảnh. Có thể một phần tử cần di chuyển khỏi vị trí relative đến fixedhoặc một số phần tử con của vùng chứa linh hoạt cần phải được di chuyển mượt mà xung quanh khung nhìn. Có thể một phần tử thậm chí cần được cấp lại và chuyển đến một vị trí hoàn toàn mới trong DOM.
Khéo léo hả?
Tốt. Kỹ thuật FLIP ở đây để tiết kiệm thời gian; nó cho phép chúng ta dễ dàng làm sinh động những điều không thể này. Tiền đề cơ bản là:
- Tên: Lấy vị trí ban đầu của các phần tử tham gia vào quá trình chuyển đổi.
- Họ: Di chuyển các phần tử và lấy vị trí cuối cùng.
- đảo ngược: Tính toán các thay đổi giữa trạng thái đầu tiên và cuối cùng và áp dụng các phép biến đổi để đảo ngược các phần tử trở lại vị trí ban đầu của chúng. Điều này làm cho nó trông giống như các phần tử vẫn còn trong Thành phố điện khí hóa phía tây dãy núi Rocky đầu tiên vị trí nhưng chúng thực sự không.
- Play: Loại bỏ các biến đổi đảo ngược và tạo hoạt ảnh cho chúng giả mạo Thành phố điện khí hóa phía tây dãy núi Rocky đầu tiên trạng thái cuối cùng nhà nước.
Đây là bản demo sử dụng plugin FLIP của GSAP, plugin này thực hiện tất cả các công việc nặng nhọc cho bạn!
Nếu bạn muốn hiểu thêm một chút về cách thực hiện vani, hãy đến với Paul Lewis's blog đăng bài - anh ấy là bộ não đằng sau kỹ thuật FLIP.
SVG mở rộng linh hoạt
Bạn hiểu tôi ... đây không phải là có thật không một mẹo hoạt hình. Nhưng thiết lập sân khấu một cách chính xác là điều bắt buộc để có hình ảnh động tốt! SVG mở rộng quy mô siêu độc đáo theo mặc định, nhưng chúng tôi có thể kiểm soát cách nó mở rộng quy mô hơn nữa với preserveAspectRatio, rất hữu ích khi tỷ lệ co của phần tử SVG và viewBox tỷ lệ khung hình khác nhau. Nó hoạt động giống như cách background-position và background-size thuộc tính trong CSS. Khai báo được tạo thành từ một giá trị căn chỉnh (background-position) Và một Gặp gỡ or Slice thẩm quyền giải quyết (background-size).
Đối với những tài liệu tham khảo Meet and Slice - slice giống như background size: covervà meet giống như background-size: contain.
preserveAspectRatio="MidYMax slice"- Căn chỉnh ở giữa trục x, dưới cùng của trục y và mở rộng tỷ lệ để bao phủ toàn bộ khung nhìn.preserveAspectRatio="MinYMin meet"- Căn chỉnh ở bên trái của trục x, trên cùng của trục y và mở rộng quy mô trong khi vẫn giữ nguyênviewBoxcó thể nhìn thấy.
Tom Miller tiến thêm một bước nữa bằng cách sử dụng overflow: visible trong CSS và một phần tử chứa để hiển thị “vùng hiển thị bên trái” và “vùng hiển thị bên phải” trong khi vẫn giữ chiều cao bị hạn chế:
Đối với hoạt ảnh SVG đáp ứng, có thể hữu ích khi sử dụng hộp xem SVG để tạo chế độ xem cắt và chia tỷ lệ bên dưới chiều rộng trình duyệt nhất định, đồng thời tiết lộ nhiều hoạt ảnh SVG ở bên phải và bên trái khi trình duyệt rộng hơn ngưỡng cửa. Chúng tôi có thể đạt được điều này bằng cách thêm tràn hiển thị trên SVG và kết hợp nó với
max-heighttrình bao bọc để ngăn SVG thu nhỏ quá nhiều theo chiều dọc.
Canvas chia tỷ lệ linh hoạt
Canvas hoạt động hiệu quả hơn nhiều cho các hoạt ảnh phức tạp với rất nhiều của các bộ phận chuyển động hơn là tạo hoạt ảnh SVG hoặc HTML DOM, nhưng nó vốn dĩ cũng phức tạp hơn. Bạn phải làm việc để đạt được hiệu suất! Không giống như SVG có các đơn vị phản hồi đáng yêu và mở rộng ra khỏi hộp, phải được quản lý xung quanh và được quản lý vi mô một chút.
Tôi thích thiết lập của tôi để nó hoạt động giống như SVG (tôi có thể thiên vị) với một hệ thống đơn vị đáng yêu để hoạt động bên trong và tỷ lệ khung hình cố định. cũng cần được vẽ lại mỗi khi có điều gì đó thay đổi, vì vậy hãy nhớ trì hoãn việc vẽ lại cho đến khi trình duyệt hoàn thành việc thay đổi kích thước hoặc gỡ lỗi!
Đức Phanxicô cũng tập hợp cái này lại thư viện nhỏ đáng yêu cho phép bạn xác định một Canvas viewBox thuộc tính và preserveAspectRatio - giống hệt SVG!
Hoạt ảnh được nhắm mục tiêu
Đôi khi bạn có thể cần phải thực hiện một cách tiếp cận ít trôi chảy hơn và có định hướng hơn đối với hoạt ảnh của mình. Thiết bị di động có ít bất động sản hơn và hiệu suất hoạt hình kém hơn so với máy tính để bàn. Vì vậy, thật hợp lý khi cung cấp hoạt ảnh giảm cho người dùng thiết bị di động, thậm chí có thể không có hoạt ảnh:
Đôi khi hoạt ảnh đáp ứng tốt nhất cho thiết bị di động không phải là hoạt ảnh nào cả! Đối với trải nghiệm người dùng trên thiết bị di động, hãy ưu tiên cho phép người dùng xem nhanh nội dung thay vì đợi hoạt ảnh kết thúc. Hoạt ảnh trên thiết bị di động nên nâng cao nội dung, điều hướng và tương tác hơn là trì hoãn nó. Eric van Holtz
Để làm điều này, chúng tôi có thể sử dụng các truy vấn phương tiện để nhắm mục tiêu các kích thước khung nhìn cụ thể giống như khi chúng tôi tạo kiểu bằng CSS! Đây là một bản trình diễn đơn giản cho thấy một hoạt ảnh CSS được xử lý bằng cách sử dụng các truy vấn phương tiện và một hoạt ảnh GSAP được xử lý bằng gsap.matchMedia():
Sự đơn giản của bản demo này đang ẩn chứa một loạt ma thuật! Hoạt ảnh JavaScript yêu cầu thiết lập và dọn dẹp nhiều hơn một chút để chỉ hoạt động chính xác ở một kích thước màn hình cụ thể. Trước đây tôi đã từng chứng kiến những điều khủng khiếp khi mọi người vừa ẩn hoạt ảnh khỏi chế độ xem trong CSS với opacity: 0, nhưng hoạt ảnh vẫn chạy trong nền sử dụng hết tài nguyên. 😱
Nếu kích thước màn hình không khớp nữa, hoạt ảnh cần phải bị hủy và giải phóng để thu gom rác và các yếu tố bị ảnh hưởng bởi hoạt ảnh cần được xóa khỏi mọi kiểu nội tuyến do chuyển động đưa vào để tránh xung đột với kiểu khác. Lên cho đến khi gsap.matchMedia(), đây là một quá trình kỳ quặc. Chúng tôi đã phải theo dõi từng hoạt ảnh và quản lý tất cả những điều này theo cách thủ công.
gsap.matchMedia() thay vào đó, cho phép bạn dễ dàng nhét mã hoạt ảnh của mình vào một hàm chỉ thực thi khi một truy vấn phương tiện truyền thông diêm. Sau đó, khi nó không còn khớp nữa, tất cả các hoạt ảnh GSAP và Trình kích hoạt cuộn trong chức năng đó được hoàn nguyên tự động. Truy vấn phương tiện mà các hoạt ảnh được đưa vào thực hiện tất cả công việc khó khăn cho bạn. Nó có trong GSAP 3.11.0 và nó là một công cụ thay đổi trò chơi!
Chúng tôi cũng không chỉ bị giới hạn về kích thước màn hình. Có một rất nhiều tính năng truyền thông ngoài kia để móc vào!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Trong bản trình diễn sau, chúng tôi đã thêm một séc cho prefers-reduced-motion để bất kỳ người dùng nào thấy hoạt ảnh mất phương hướng sẽ không bị làm phiền bởi những thứ quay cuồng xung quanh.
Và hãy xem bản demo thú vị khác của Tom Miller, nơi anh ấy sử dụng tỷ lệ khung hình của thiết bị để điều chỉnh hoạt ảnh:
Suy nghĩ bên ngoài hộp, vượt ra ngoài kích thước màn hình
Có nhiều điều để suy nghĩ về hoạt ảnh đáp ứng hơn là chỉ kích thước màn hình. Các thiết bị khác nhau cho phép các tương tác khác nhau và thật dễ gặp rắc rối khi bạn không cân nhắc điều đó. Nếu bạn đang tạo trạng thái di chuột trong CSS, bạn có thể sử dụng hover tính năng đa phương tiện để kiểm tra xem liệu người dùng có chính cơ chế đầu vào có thể di chuột qua các phần tử.
@media (hover: hover) {
/* CSS hover state here */
}Một số lời khuyên từ Jake trắng:
Phần lớn thời gian chúng tôi căn cứ vào hình ảnh động của mình dựa trên chiều rộng trình duyệt, tạo ra giả định ngây thơ rằng người dùng máy tính để bàn muốn trạng thái di chuột. Cá nhân tôi đã gặp rất nhiều vấn đề trong quá khứ khi tôi chuyển sang bố cục máy tính để bàn> 1024px, nhưng có thể phát hiện cảm ứng trong JS - dẫn đến sự không khớp khi bố cục dành cho máy tính để bàn, nhưng JS là dành cho điện thoại di động. Ngày nay, tôi dựa vào di chuột và con trỏ để đảm bảo tính ngang bằng và xử lý các bề mặt iPad Ưu điểm hoặc cửa sổ (có thể thay đổi loại con trỏ tùy thuộc vào việc nắp có úp xuống hay không)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Sau đó, tôi sẽ kết hợp các truy vấn bố cục CSS và các truy vấn JavaScript của mình, vì vậy tôi đang coi thiết bị đầu vào là yếu tố chính hỗ trợ theo chiều rộng, thay vì ngược lại.
Mẹo ScrollTrigger
Nếu bạn đang sử dụng GSAP's Plugin ScrollTrigger, có một tiện ích nhỏ hữu ích mà bạn có thể sử dụng để dễ dàng phân biệt khả năng cảm ứng của thiết bị: ScrollTrigger.isTouch.
0– không chạm vào (chỉ con trỏ / chuột)1– chỉ chạm vào thiết bị (như điện thoại)2- thiết bị có thể chấp nhận chạm đầu vào và con trỏ chuột (như máy tính bảng Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Một mẹo khác cho hoạt ảnh được kích hoạt bằng cuộn đáp ứng…
Bản demo sau đây đang di chuyển một thư viện hình ảnh theo chiều ngang, nhưng chiều rộng thay đổi tùy thuộc vào kích thước màn hình. Nếu bạn thay đổi kích thước màn hình khi đang xem hoạt ảnh được nửa chừng, bạn có thể nhận được các hoạt ảnh bị hỏng và các giá trị cũ. Đây là một lỗi tăng tốc phổ biến, nhưng có thể dễ dàng giải quyết! Đưa phép tính phụ thuộc vào kích thước màn hình vào một giá trị chức năng và đặt invalidateOnRefresh:true. Bằng cách đó, ScrollTrigger sẽ tính toán lại giá trị đó cho bạn khi trình duyệt thay đổi kích thước.
Thưởng cho mẹo mọt sách GSAP!
Trên thiết bị di động, thanh địa chỉ của trình duyệt thường hiển thị và ẩn khi bạn cuộn. Điều này được tính là một sự kiện thay đổi kích thước và sẽ kích hoạt một ScrollTrigger.refresh(). Điều này có thể không lý tưởng vì nó có thể gây ra hiện tượng nhảy trong hoạt ảnh của bạn. GSAP 3.10 đã được thêm vào ignoreMobileResize. Nó không ảnh hưởng đến cách thanh trình duyệt hoạt động, nhưng nó ngăn ScrollTrigger.refresh() khỏi bắn cho thay đổi kích thước theo chiều dọc nhỏ trên các thiết bị chỉ cảm ứng.
ScrollTrigger.config({
ignoreMobileResize: true
});Nguyên tắc chuyển động
Tôi nghĩ rằng tôi sẽ để lại cho bạn một số phương pháp hay nhất để xem xét khi làm việc với chuyển động trên web.
Khoảng cách và sự nới lỏng
Một điều nhỏ nhưng quan trọng dễ quên với hoạt ảnh đáp ứng là mối quan hệ giữa tốc độ, động lượng và khoảng cách! Hoạt hình hay nên bắt chước thế giới thực để cảm thấy đáng tin cậy và mất nhiều thời gian hơn trong thế giới thực để bao phủ một khoảng cách lớn hơn. Chú ý đến khoảng cách mà hoạt ảnh của bạn đang di chuyển và đảm bảo rằng thời lượng và tốc độ được sử dụng có ý nghĩa trong ngữ cảnh với các hoạt ảnh khác.
Bạn cũng có thể thường xuyên áp dụng các biện pháp nới lỏng ấn tượng hơn cho các yếu tố cần di chuyển xa hơn để thể hiện động lực gia tăng:
Đối với một số trường hợp sử dụng nhất định, có thể hữu ích nếu điều chỉnh thời lượng động hơn dựa trên chiều rộng màn hình. Trong bản trình diễn tiếp theo này, chúng tôi sẽ sử dụng gsap.utils để kẹp giá trị mà chúng ta nhận lại từ dòng điện window.innerWidth vào một phạm vi hợp lý, sau đó chúng tôi sẽ ánh xạ con số đó thành một khoảng thời gian.
Khoảng cách và số lượng
Một điều khác cần lưu ý là khoảng cách và số lượng của các phần tử ở các kích thước màn hình khác nhau. Trích dẫn Steven Shaw:
Nếu bạn có một số loại hoạt ảnh môi trường (thị sai, đám mây, cây cối, hoa giấy, đồ trang trí, v.v.) được đặt xung quanh cửa sổ, hãy đảm bảo rằng chúng chia tỷ lệ và / hoặc điều chỉnh số lượng tùy thuộc vào kích thước màn hình. Màn hình lớn có lẽ cần nhiều yếu tố trải đều khắp, trong khi màn hình nhỏ chỉ cần một vài yếu tố cho hiệu ứng tương tự.
Tôi yêu cái cách mà Opher Vishnia nghĩ về hoạt hình như một sân khấu. Thêm và bớt các yếu tố không chỉ cần là một hình thức, nó có thể là một phần của vũ đạo tổng thể.
Khi thiết kế hoạt ảnh đáp ứng, thách thức không phải là làm thế nào để nhồi nhét cùng một nội dung vào chế độ xem sao cho nó “phù hợp”, mà là làm thế nào để sắp xếp tập hợp các nội dung hiện có để nó truyền đạt cùng một ý định. Điều đó có nghĩa là đưa ra lựa chọn có ý thức về phần nội dung nào cần thêm và phần nội dung nào cần xóa. Thông thường trong thế giới hoạt hình, mọi thứ không chỉ xuất hiện trong hoặc ngoài khung hình. Thật hợp lý khi nghĩ về các yếu tố như đang vào hoặc ra khỏi “sân khấu”, tạo hoạt ảnh cho quá trình chuyển đổi đó theo cách có ý nghĩa trực quan và chủ đề.
Và đó là rất nhiều. Nếu bạn có thêm bất kỳ mẹo hoạt hình đáp ứng nào, hãy đưa chúng vào phần nhận xét. Nếu có bất kỳ điều gì siêu hữu ích, tôi sẽ thêm chúng vào bản tóm tắt thông tin này!
phụ lục
Thêm một ghi chú từ Tom Miller khi tôi chuẩn bị bài viết này:
Có lẽ tôi đã quá muộn với mẹo này cho bài viết về hoạt ảnh đáp ứng của bạn, nhưng tôi thực sự khuyên bạn nên “hoàn thiện tất cả các hoạt ảnh trước khi xây dựng”. Tôi hiện đang trang bị thêm một số hoạt ảnh trang web với "phiên bản dành cho thiết bị di động". Cảm ơn trời cho
gsap.matchMedia… Nhưng tôi chắc chắn ước gì chúng ta đã biết rằng sẽ có các bố cục / hoạt ảnh trên thiết bị di động riêng biệt ngay từ đầu.
Tôi nghĩ rằng tất cả chúng ta đều đánh giá cao rằng mẹo "lập kế hoạch trước" này đã xuất hiện vào phút cuối tuyệt đối. Cảm ơn, Tom và chúc may mắn với những trang bị bổ sung đó.
