boxGeometry
và meshNormalMaterial
shaderMaterial
để làm hiệu ứng lửashaderMaterial
để làm hiệu ứng hologramshaderMaterial
để làm hiệu ứng bề mặt cho hành tinhspring
, linear
và easing
breakpoints
khác nhauclamp
, min
, max
, minmax
kết hợp với các đơn vị như px
, rem
, %
, vw
, vh
, ... sẽ tạo ra hằng hà sa số các tổ hợp ảnh hưởng đến responsive behavior trên các thiết bị khác nhau.Chỉ khi các bạn nắm vững về mental model của responsive behavior, các bạn mới có thể truyển tải hiệu quả việc responsive trong thiết kế của mình cho các Developer.line
, rect
và polygon
line
, polyline
, polygon
, và rect
.Các hiệu ứng svg mà mình sử dụng trong portfolio lần này phần lớn là mình code chay svg để có thể hoàn toàn kiểm soát animation sử dụng SMIL mà không cần phải dùng Lottie hay After Effect. Việc hiểu rõ SMIL sẽ giúp các bạn rất nhiều trong việc tạo hiệu ứng cho SVG.Trong tương lai, tùy theo nhu cầu của cộng đồng, mình sẽ cân nhắc làm thêm một series riêng về việc code SVG để có thể dễ dàng kiểm soát phần animation.Dành cho các bạn UI Designer, mình sẽ chỉ có một lời khuyên là các bạn nên sử dụng SVG đồng nhất từ một thư viện icon. Việc sử dụng nhiều loại icon từ các thư viện khác nhau sẽ làm cho các trang web của bạn nhìn không chuyên nghiệp. Vậy nếu icon bạn cần không có trong thư viện bạn dùng thì phải xử lý như thế nào? Đối với mình, nếu thư viện icon mình dùng không có icon mình muốn, mình sẽ sử dụng pen tool của Figma và tìm các hình ảnh tương đồng với icon mà mình muốn sử dụng rồi trace theo nét vẽ. Tuy cách này sẽ hơi mất thời gian nhưng mình có thể đảm bảo là các icon của mình đều sẽ đồng nhất.