Tấn công vào nền dựa trên hoạt hình blob trong thiết kế web

Hình nền hoạt hình là một tính năng phổ biến của các trang web hiện đại. Nó không còn là một xu hướng hay một cái gì đó phi thường. Đó chỉ là một trong những cách khả thi để trang trí một khu vực anh hùng ngày nay. Mặc dù vẫn còn một vấn đề với khả năng tương thích trình duyệt, nhưng giải pháp này đã tìm được một lối đi riêng cho chính nó.

Có nhiều loại hình ảnh động khác nhau. Bạn có thể đi qua:

Trong khi vài năm trước, hoạt hình hạt lấy cảm hứng từ chòm sao cai trị chuồng gà, ngày nay hoạt hình hình giọt nước kích thích tâm trí của các đội sáng tạo. Bạn có thể làm gì? Hành vi lỏng là không thể cưỡng lại. Thói quen chuyển đổi cho thấy cách một giọt lớn di chuyển trơn tru trong không gian dễ dàng chiến thắng đối tượng trực tuyến và đưa trang web của bạn lên vị trí dẫn đầu.

Để tận dụng lợi thế của kỹ thuật thông thường này, chúng tôi cung cấp cho bạn một bộ các đoạn mã nổi bật sẽ cung cấp cho bạn một gợi ý về cách xây dựng hoạt hình bong bóng của riêng bạn. Bạn có thể làm điều đó với các công cụ truyền thống hoặc mới. Bây giờ, hãy tìm sự kết hợp hoàn hảo cho dự án tiếp theo của bạn.

Hoạt hình blob Uwe Chardon

Phiên bản Uwe Chardon của giải pháp phổ biến này là thiết thực và truyền cảm hứng. Nó có tính năng thả đơn giản, phẳng với màu cam đẹp và các cạnh mịn được đặt trong môi trường sạch sẽ. Anh quản lý để bắt chước hành vi chất lỏng khá tốt.

Kết quả là một sự kết hợp chiến thắng của hình thức đơn giản và hành vi phức tạp trông khá ấn tượng.

Xem hoạt hình thuần túy CSS của Uwe Chardon

Ashton Holgate Blob

Ví dụ trên đại diện cho một loại thả truyền thống với hình dạng không đều và một phép biến đổi tương đối biểu cảm. Tuy nhiên, dự án Ashton Holgate này dính vào một hình dạng thần thánh hơn, gần như giáp với vòng tròn, và những thay đổi hầu như không đáng chú ý. Tuy nhiên, nó cũng có vẻ đặc biệt.

Hơn nữa, nghệ sĩ cũng đã đùa giỡn với văn bản, buộc nó phải thay đổi màu sắc của nó sang phía đối diện khi chạm vào khu vực bong bóng.

Xem Bút Blob của Ashton Holgate

Máy xúc lật chất lỏng của Fabio Ottaviani

Fabio Ottaviani đã đưa vào thực tiễn bản chất vui tươi của hành vi lôi cuốn vốn có trong hoạt hình blob. Bong bóng của nó nhỏ, nhưng nó tạo ra một tác động lớn với sự biến đổi đáng yêu và sự vui nhộn của nó.

Mặc dù bảng tên dự án bút ghi “Bộ sạc”, nó có thể dễ dàng được chuyển đổi thành một chi tiết nền trang trí. Và để làm điều này, tất cả những gì bạn cần biết là HTML và CSS, vì nghệ sĩ không sử dụng bất kỳ phép thuật JavaScript nào. Thông minh.

Xem Bounce Boom Liquid Loader của Fabio Ottaviani

Thử nghiệm vết bẩn vải của Shaw

Không giống như ví dụ trước, sự sụt giảm này hoàn toàn do JavaScript tạo ra. Vì vậy, hãy sẵn sàng lao vào một giải pháp thú vị và lối chơi phức tạp với đồ họa. Ngoài ra, khái niệm này khác với các khái niệm khác về ngoại hình nguyên thủy của nó, cùng với phong thái khá mượt mà và bình tĩnh tạo ra một bầu không khí thanh thản.

Nó khá phổ quát và trung tính. Do đó, nó có thể trở thành một hình ảnh động hoàn hảo cho nhiều dự án.

Xem Thử nghiệm Bút Canvas của Shaw

Blob của Jeffrey

Giải pháp Jeffrey này là sự kết hợp chiến thắng của hai xu hướng. Ở đây, bạn có thể tìm thấy một đáy không bằng phẳng rất phổ biến ngày nay và hành vi lỏng chiếm ưu thế so với các tùy chọn khác.

Đoạn mã được tạo bằng HTML, CSS và JavaScript. Nó trông nhất quán trên nhiều trình duyệt và thiết bị. Nghệ sĩ sử dụng thuật toán lò xo cơ bản làm cho sự tương tác với bong bóng lớn tạo cảm giác chân thực và không giả tạo.

Lưu ý rằng mặc dù bong bóng chiếm một nửa cảnh, nhưng nó không chi phối người xem. Phong thái mượt mà và thanh thản nằm đằng sau sự thận trọng này.

Nhìn vào cây bút của Jeffrey

Blobs của Charlotte Dann

Nếu một giọt không đủ để tạo ấn tượng phù hợp, thì bạn luôn có thể chọn một tá trong số chúng. Charlotte Dann, với đoạn mã tiện lợi của mình, sẽ chỉ cho bạn cách làm mà không làm hỏng hiệu ứng tổng thể và áp đảo khách truy cập.

Đoạn mã của nó chỉ là một điều trị để nhìn thấy. Nó có nhiều bong bóng di chuyển nhỏ tương tác với nhau. Mỗi người trông giống như một điểm sáng nhỏ. Cùng nhau, chúng tạo thành một giọt lớn tỏa ra sự ấm áp trên tất cả các mặt trận.

Xem Blobs Bút của Charlotte Dann

Bây giờ, hãy chuyển từ thế giới phẳng sang thế giới ba chiều.

Blob của Georgi Nikoloff

Blob của Georgi Nikoloff là một ví dụ. Nó ngay lập tức gây chú ý với màu sắc rực rỡ, vẻ ngoài công nghệ cao và hành vi năng động. Nhà phát triển tận dụng tối đa các công nghệ tiên tiến, sử dụng WebGL, GLSL và shader cho lợi thế của họ. Mặc dù giải pháp này tùy thuộc vào khả năng tương thích trình duyệt, nhưng nó có vẻ truyền cảm hứng.

Xem blob lông của Georgi Nikoloff

Thí nghiệm 6 bởi Daniel Del Core

Daniel Del Core chỉ cho khán giả trực tuyến cách chơi xung quanh với tiếng ồn Simplex và khắc phục nó bằng một số kết cấu được sao chép cẩn thận. Kết quả là một paintball lấy cảm hứng từ kẹo. Mặc dù anh ta di chuyển khá nhanh, nhưng anh ta rất hấp dẫn đến nỗi khó có thể rời mắt ngay lập tức.

Xem thử nghiệm bút # 6 bởi Daniel Del Core

Eli Fitch thả hạt giả

Không giống như ví dụ trước, có một tính cách táo bạo và sự lôi cuốn của một ngôi sao nhạc pop thập niên 80 bị ám ảnh bởi spandex, người này cảm thấy giống như một thứ gì đó từ kỹ thuật tương lai khiêm tốn. Các đốm màu được xây dựng từ các hạt nhỏ trở nên sáng hơn ở một số góc cho hình ảnh 3D.

Không có gì đáng ngạc nhiên, nghệ sĩ sử dụng phép thuật của Three.js và công việc kết cấu thủ tục khéo léo để thực hiện khái niệm này.

Xem Bút giả hạt của Eli Fitch # 3December

Trình tạo CSS Blob của Edwin Chen

Chúng tôi sẽ kết thúc bộ sưu tập của mình với CSS Blob Generator của Edwin Chen. Như tiêu đề đã nói, cây bút bi này có một sân chơi nhỏ nơi bạn có thể tạo hình dạng thả.

Ở đây bạn sẽ tìm thấy một bảng điều khiển nhỏ nơi bạn có thể gán bán kính cho mỗi cạnh. Mặc dù nó là tĩnh và phẳng, bạn có thể dễ dàng sao chép kết quả và khiến nó di chuyển với sự trợ giúp của JavaScript.

Xem phần mềm tạo CSS CSS của Edwin Chen

Hình dạng hoàn hảo cho một môi trường thư giãn

Không có gì đáng ngạc nhiên, bản chất trơn tru, bình tĩnh của hành vi chất lỏng đang trở nên phổ biến trong những ngày này. Là một dòng suối nhỏ hấp dẫn chạy xuyên qua khu rừng, nó thu hút bạn và phục vụ như một hòn đảo thanh bình trong thế giới trực tuyến luôn thay đổi.

Hoạt hình dựa trên Blob được dự định có lợi cho các dự án hiện đại. Họ kín đáo, mặc dù họ chắc chắn thu hút sự chú ý. Cho dù bạn chọn một hiện thực 3D phong cách, bằng phẳng hoặc lòe loẹt, bạn sẽ dễ dàng thiết lập một bầu không khí bình tĩnh.

Nó sẽ làm phong phú thêm trải nghiệm, tô điểm nền, đồng thời nhường chỗ cho nội dung. Những nền tảng này sẽ giúp bạn duy trì sự cân bằng giữa dữ liệu hình ảnh và văn bản.