Bí Quyết Tạo Hiệu Ứng Hình Ảnh Động Trên Svg Và Css, 17 Mẫu Hiệu Ứng Css Hàng Đầu Hiện Nay
Tổng quan
Việc tạo hiệu ứng trên trang web chưa bao giờ là đơn giản. SVG (Scalable Vector Graphics) sử dụng đánh dấu XML để giúp hiển thị tốt trên mọi kích thước màn hình. Nếu bạn download ảnh png hoặc jpg bạn sẽ nhận được hình ảnh chỉ có thể hiển thị trên trình duyệt với thẻ
Khi bạn đã download ảnh, hãy mở tệp và sao chép mã vào trang web như Code
Pen hoặc JSfiddle... hoặc bạn có thể sử dụng trình soạn thảo mã của mình. Cùng bắt đầu nào!
Style cho SVG
Bước này là tùy chọn nhưng ảnh SVG không căn giữa. Chúng ta cũng sẽ thay đổi màu background. Thay đổi màu background thành bất kỳ màu nào bạn muốn và thêm ID cho phần tử SVG (ở đây mình dùng #Layer_1).
Bạn đang xem: Bí quyết tạo hiệu ứng hình ảnh động trên SVG và CSS
body { background-color: #2b4b63}#Layer_1 { display: block; margin: 0 auto;}
Phân tích ảnh SVG
Ở phần trên, bạn thấy rằng mình đã sử dụng CSS để căn giữa SVG. Tập tin SVG của chúng ta như sau:
Chúng ta có thể sử dụng ID cho từng phần tử SVG riêng biệt. Tất cả các phần tử polygons và paths là những phần tử khác nhau bên trong ảnh SVG. Điều này sẽ làm mọi thứ trở nên dễ dàng hơn. Bạn có thể nhận thấy ở đây mình gán ID cho các phần tử polygons và paths
Tạo hiệu ứng cho phần tử đầu tiên
Hãy chắc chắn là bạn đã import 2 thư viện từ GSAP. Đầu tiên hãy khởi tạo thể hiện của đối tượng timeline. Cách làm như sau:
Chúng ta khởi tạo timeline sử dụng biến tl
var tl = new Timeline
Max();Chúng ta sử dụng biến tl để tạo hiệu ứng trên timeline. Nó có một số tham số chúng ta phải truyền vào.
tl.from : xác định vị trí hiệu ứng bắt đầu và nó sẽ tạo ra hiệu ứng trên trình duyệt hiển thị SVG.
tl.from("#stand": chọn phần tử với ID stand để tạo hiệu ứng.
tl.from("#stand", 0.5: thời gian của hiệu ứng. Trong trường hợp này là nửa giây.
tl.from("#stand", 0.5, {}: tất cả mọi thứ bên trong các dấu ngoặc nhọn là các tham số hiệu ứng. Bên trong dấu ngoặc chúng ta có các tham số:
{scale
Y: 0 : thu phóng khiến phần tử biến mất.
{scale
Y:0, transform
Origin: “bottom" : tham số transform
Origin cho biết vị trí xảy ra hiệu ứng transform. Nếu chúng ta không truyền vào tham số bottom thì hiệu ứng sẽ xảy ra từ trên xuống dưới.
ease: Power2.ease
Out: tham số xác định tốc độ chuyển động. Chúng ta có một công cụ trực quan giúp bạn tạo ra tham số tại đây.
tl.from("#stand", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Power2.ease
Out})Chúng ta sẽ được kết quả như sau:
Để tạo hiệu ứng sau ngay khi hiệu ứng trước kết thúc, chúng ta chỉ cần sử dụng thêm hàm .from ngay bên dưới.
var tl = new Timeline
Max();tl.from("#stand", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Power2.ease
Out}) .from("#stand
Back", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Bounce.ease
Out})
Transform Origin
Chúng ta xem lại các 2 hiệu ứng xảy ra từ dưới lên. Đối với hiệu ứng này, chúng ta muốn phần dưới của màn hình kéo dài từ giữa sang hai bên.var tl = new Timeline
Max();tl.from("#stand", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Power2.ease
Out}) .from("#stand
Back", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Bounce.ease
Out}).from("#monitor
Bottom", 0.7, {scale
X: 0, transform
Origin: "center", ease: Bounce.ease
Out})
Tạo hiệu ứng cho màn hình máy tính
Đến đây chúng ta đã tạo ra hiệu ứng tuyệt vời. Tuy nhiên, hiệu ứng xảy quá nhanh nên chúng ta cần một chút delay. Delay sẽ trì hoãn 1 khoảng thời gian trước khi hiệu ứng xảy ra. Bây giờ chúng ta sẽ tạo ra hiệu ứng cho phần trên của máy tính. Chúng ta sẽ sử dụng đoạn mã sau để tạo hiệu ứng cho nó.
tl.from("#stand", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Power2.ease
Out}) .from("#stand
Back", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Bounce.ease
Out}) .from("#monitor
Bottom", 0.7, {scale
X: 0, transform
Origin: "center", ease: Bounce.ease
Out}) .from("#screen", 0.6, {scale
Y: 0, transform
Origin: "bottom", ease: Circ.ease
Out, delay: 0.4})
Tạo hiệu ứng cho box màu vàng
Đối với hiệu ứng này, chúng ta chỉ cần cho nó xuất hiện. Chúng ta sử dụng đoạn mã sau:
var tl = new Timeline
Max();tl.from("#stand", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Power2.ease
Out}) .from("#stand
Back", 0.5, {scale
Y: 0, transform
Origin: "bottom", ease: Bounce.ease
Out}) .from("#monitor
Bottom", 0.7, {scale
X: 0, transform
Origin: "center", ease: Bounce.ease
Out}) .from("#screen", 0.6, {scale
Y: 0, transform
Origin: "bottom", ease: Circ.ease
Out, delay: 0.4}).from("#yellow
Box", 0.5, {scale: 0})
Tạo hiệu ứng cho các phần tử màu đỏ
Ở những phần trên chúng ta chỉ áp dụng hiệu ứng cho các phần tử đơn lẻ. Ở đây chúng ta có một tập hợp các phần tử màu đỏ nên chúng ta sẽ sử dụng selector chung. Sử dụng devtools chúng ta có thể thấy tất cả các đường màu đỏ đều có phần tử cha là . Do đó, chúng ta có selector như sau:
#Layer_1 > g:nth-child(1) > g
Bây giờ để có được tất cả các phần tử con của phần tử cha này, chúng ta chỉ cần thêm vào đường dẫn đến cuối selector. Điều này sẽ hoạt động:
#Layer_1 > g:nth-child(1) > g path
Bây giờ chúng ta có một danh sách tất cả các phần tử có màu đỏ. Chúng ta có thể sử dụng hàm tl.from để tạo hiệu ứng này nhưng nó sẽ làm động tất cả chúng cùng một lúc. Thay vào đó chúng ta sử dụng tl.stagger
From sẽ làm chính xác điều này! Hãy cùng xem đoạn mã cuối cùng.
.stagger
From("#Layer_1 > g:nth-child(1) > g path", 0.2, {scale
X: 0}, -0.1)Chúng ta đặt selector mà chúng ta đã xác định trước đó, chúng ta đặt thời gian, chúng ta nhận thấy -0,1? Điều đó có nghĩa là gì?
Trên hàm .stagger
From, chúng ta cần xác định tại điểm nào chúng ta muốn mỗi phần tử path xảy ra hiệu ứng khi hiệu ứng trước kết thúc. Trong trường hợp này, chúng ta thêm 0.1s. Lý do chúng ta thêm vào - trong đó để hiệu ứng xảy ra từ trái sang phải chứ không phải hướng ngược lại.
Bạn có thể tham khảo toàn bộ source code tại đây
Kết luận
Điều làm cho GSAP trở nên tuyệt vời đến nỗi bạn có thể tạo ra những hiệu ứng tuyệt vời như vậy với các phần tử HTML cũng như các phần tử SVG. Khi bạn hiểu cú pháp, việc tạo ra hiệu ứng như thế này chỉ mất 10 phút.
Ngày nay khi thiết kế website, các nhà thiết kế web thường quan tâm đến những hiệu ứng độc đáo, ấn tượng để có thể thu hút được người dùng truy cập và click vào trang web của bạn. Ngày nay với CSS, có rất nhiều cách khác nhau để cung cấp hiệu ứng chuyển động, đặc biệt là cho hình ảnh. Trong quá trình biên dịch, có hơn 250 hiệu ứng chuyển động để truyền cảm hứng cho bạn. Bạn cũng có thể lấy mã tại nguồn. Dưới đây sẽ là 10 thư viện CSS cung cấp những hiệu ứng chuyển động hình ảnh tốt nhất dành cho bạn.
Xem thêm: Công Dụng Của Nghệ Vàng Tươi, Những Bài Thuốc Hay Từ Củ Nghệ Vàng
Image Hover Effects
Trong trang này bạn sẽ tìm thấy một bộ sưu tập của 16 hiệu ứng hình ảnh di chuột có phụ đề. Grab các mã HTML và CSS cho từng hiệu ứng bằng cách di chuyển trên hình ảnh, sau đó nhấp vào show code .
Hình ảnh Caption Hover Animation (4 hiệu ứng)
Dưới đây là 4 hình ảnh động chú thích cực cool. Các hiệu ứng này được xây dựng với sự chuyển đổi CSS3 thuần , và không có Java
Script, tăng compability trên trình duyệt.
i
Hover (35 hiệu ứng)
i
Hover là một bộ sưu tập các hiệu ứng chuyển động chạy bằng CSS3. Có 20 hiệu ứng vòng tròn di chuột và 15 hiệu ứng hover vuông. Để sử dụng các hiệu ứng, bạn sẽ cần phải viết một số đánh dấu HTML và bao gồm các file CSS.
Imagehover (44 hiệu ứng)
Thư viện này chứa 44 hiệu ứng làm với CSS. Một số tác dụng bao gồm fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds và shutters trong nhiều hướng. Có một phiên bản mở rộng của 216 hiệu ứng có thể được mua với giá € 14.
Hover Effect Ideas (30 hiệu ứng)
Trang này giới thiệu hình ảnh di chuột được làm bằng Codrop, mang đến cho bạn cảm hứng khi thực hiện quá trình chuyển đổi trơn tru giữa các hình ảnh và chú thích của nó. Có tổng số 30 hiệu ứng trên hai bộ hướng dẫn và mã nguồn.
Hover CSS (108 hiệu ứng)
Hover CSS cho phép bạn thêm các hiệu ứng di chuột vào mọi yếu tố, chẳng hạn như một nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm quá trình chuyển đổi 2D, quá trình chuyển đổi nền, biên giới, bóng, ánh sáng chuyển tiếp, và nhiều hơn nữa. Các thư viện có sẵn trong CSS, Sass, và LESS.
Animatism (100 hiệu ứng)
Hiện có hơn 100 hình ảnh di chuột hình ảnh động để nút, lớp phủ, chi tiết, chú thích, hình ảnh và các nút phương tiện truyền thông xã hội. Tất cả các hiệu ứng được cung cấp bởi CSS3.
Caption Hover Effect (7 hiệu ứng)
Có 7 hiệu ứng khác nhau trong bộ sưu tập này. Tất cả các quá trình chuyển đổi trông rất trơn tru và mịn màng. Tới các hướng dẫn phần để học cách áp dụng những hiệu ứng này vào dự án của bạn.
CSS Image Hover Effects (15 hiệu ứng)
Một bộ sưu tập các hiệu ứng chuyển động đơn giản như zoom, trượt, xoay, gray scale, độ mờ, độ mờ đục và các hiệu ứng cơ bản khác. Bạn có thể sử dụng những hiệu ứng này bằng cách thêm vào các lớp CSS.
Direction-aware 3D hover effect
Đây là một hiệu ứng di chuột siêu mát mẻ mà sẽ phát hiện chuyển động chuột cuối cùng của bạn. Các chú thích hình ảnh sẽ mở ra từ một trong bốn hướng dựa trên vị trí con trỏ cuối cùng của bạn.
Bbb
Hover Animation
Dưới đây là một hình ảnh động hover viền lấy cảm hứng từ UNIQLO. Khi một sự kiện di chuột, biên giới của hình ảnh sẽ trở nên sống động.
Tiles Animated Hover
Một thư viện thiết kế cho tiêu đề, một trong những tính năng này gồm zoom chậm, trượt, cửa sổ pop-ins, lớp phủ mờ số những thứ khác.
SVG clip-path Hover Effect
Một hiệu ứng di chuột hình ảnh x-ray spotlight siêu tuyệt vời cung cấp bởi SVGclip-path và CSS chuyển tiếp. Hoạt động tốt trên Chrome, Opera và Safari.
Trên đây là 10 thư viện CSS cung cấp cho bạn những hiệu ứng hình ảnh động độc đáo và ấn tượng, bạn có thể tham khảo và sử dụng cho trang web mình thu hút với người dùng nhé.
