Lần này là custom cursor – chỉnh lại con trỏ chuột cho web nhìn “nghệ nghệ”, sinh động, và có phần cá nhân hóa chút xíu.
Cuối tuần mở lap thì cũng hơi ngán ngán. Mà ngồi nhìn, lướt mấy web nước ngoài 1 lúc thì cũng thấy mê mê, con chuột chạy mượt, hiệu ứng xịn sò, thấy cũng ham ham.
Nhưng nó bị cấn cấn mấy cái này:
- Liệu thêm tính năng này có làm web nặng không? Có đáng làm không? Có ai để ý không? Có gì khác biệt không? Có mang lại giá trị gì không?
- Làm thì nó có tương tác mạnh không? Hay chỉ để click thôi?”
Rồi nghĩ tới nghĩ lui, vẫn quyết định:
Làm!
Làm là học, học là vọc, vọc là… biết thêm cái mới.
Vẫn theo công thức cũ hay dùng mỗi khi muốn thêm thứ gì vào website:
- Lượn vài vòng qua mấy site đẹp để xem người ta làm ra sao.
- Hiểu rule, hiểu nguyên lý nó chạy thế nào.
- Tự demo lại bằng version của mình
- Rồi thử “quẩy nát” trên site thật của mình. ( Khúc này phá, độ sát thương là 100%)
Nghe thì có vẻ hoành tráng, chứ thực ra tính năng này cũng chỉ gói gọn trong 3 phần thôi:
1. HTML:
Hiểu đơn giản nó là khung xương, là tạo hình của con trỏ chuột . Giống như kiểu vẽ một hình tròn hay hình vuông trên giấy, thì cái HTML này là phần tạo ra cái hình đó trên website. Nếu muốn con trỏ chuột là: hình tròn, hình vuông, hình trái tim, hay icon gì đó… thì phần này sẽ lo.
[box-start]
- <div class=”cursor-dot”></div>
- <div class=”cursor-ring”></div>
Tạo 2 phần tử:
- .cursor-dot: hình tròn nhỏ – là điểm trung tâm con trỏ.
- .cursor-ring: vòng tròn to hơn – hiệu ứng bao quanh con trỏ.
=> Hiểu là: đây là phần vẽ con trỏ trên màn hình.
[box-end]
2. CSS :
Hiểu là phần trang điểm make up làm đẹp cho con trỏ. Sau khi có cái hình, thì giờ là lúc “tô son chét phấn” cho nó. CSS sẽ giúp đổi màu con trỏ (xanh, đỏ, tím, vàng, da cam…), hoặc làm cho nó trong suốt, đổ bóng, đổi kích thước, hay thêm hiệu ứng lung tung bay bổng, wow các kiểu…
3. JavaScript :
Giúp tương tác điều khiển con trỏ “biết đi theo” nói chung là tương tác. Con trỏ phải di chuyển theo chuột, phải phản ứng khi người dùng rê chuột, click chuột thì phần này là việc của JavaScript. Nói vui thì đây là “linh hồn” của con trỏ, nhờ nó mà mọi thứ sống động, có chút hồn với user.
Xong xuôi thì thấy vui vui.
Vẫn là cái cảm giác tự mò, tự học, tự làm – thứ khiến mình hạnh phúc hơn việc gặp lại NYC gấp nhiều lần.
Cuối tuần_thứ 7, 05/07/2025.
Lần này là custom cursor – chỉnh lại con trỏ chuột cho web nhìn “nghệ nghệ”, sinh động, và có phần cá nhân hóa chút xíu.
Cuối tuần mở lap thì cũng hơi ngán ngán. Mà ngồi nhìn, lướt mấy web nước ngoài 1 lúc thì cũng thấy mê mê, con chuột chạy mượt, hiệu ứng xịn sò, thấy cũng ham ham.
Nhưng nó bị cấn cấn mấy cái này:
- Liệu thêm tính năng này có làm web nặng không? Có đáng làm không? Có ai để ý không? Có gì khác biệt không? Có mang lại giá trị gì không?
- Làm thì nó có tương tác mạnh không? Hay chỉ để click thôi?”
Rồi nghĩ tới nghĩ lui, vẫn quyết định:
Làm!
Làm là học, học là vọc, vọc là… biết thêm cái mới.
Vẫn theo công thức cũ hay dùng mỗi khi muốn thêm thứ gì vào website:
- Lượn vài vòng qua mấy site đẹp để xem người ta làm ra sao.
- Hiểu rule, hiểu nguyên lý nó chạy thế nào.
- Tự demo lại bằng version của mình
- Rồi thử “quẩy nát” trên site thật của mình. ( Khúc này phá, độ sát thương là 100%)
Nghe thì có vẻ hoành tráng, chứ thực ra tính năng này cũng chỉ gói gọn trong 3 phần thôi:
1. HTML:
Hiểu đơn giản nó là khung xương, là tạo hình của con trỏ chuột . Giống như kiểu vẽ một hình tròn hay hình vuông trên giấy, thì cái HTML này là phần tạo ra cái hình đó trên website. Nếu muốn con trỏ chuột là: hình tròn, hình vuông, hình trái tim, hay icon gì đó… thì phần này sẽ lo.
[box-start]
- <div class=”cursor-dot”></div>
- <div class=”cursor-ring”></div>
Tạo 2 phần tử:
- .cursor-dot: hình tròn nhỏ – là điểm trung tâm con trỏ.
- .cursor-ring: vòng tròn to hơn – hiệu ứng bao quanh con trỏ.
=> Hiểu là: đây là phần vẽ con trỏ trên màn hình.
[box-end]
2. CSS :
Hiểu là phần trang điểm make up làm đẹp cho con trỏ. Sau khi có cái hình, thì giờ là lúc “tô son chét phấn” cho nó. CSS sẽ giúp đổi màu con trỏ (xanh, đỏ, tím, vàng, da cam…), hoặc làm cho nó trong suốt, đổ bóng, đổi kích thước, hay thêm hiệu ứng lung tung bay bổng, wow các kiểu…
3. JavaScript :
Giúp tương tác điều khiển con trỏ “biết đi theo” nói chung là tương tác. Con trỏ phải di chuyển theo chuột, phải phản ứng khi người dùng rê chuột, click chuột thì phần này là việc của JavaScript. Nói vui thì đây là “linh hồn” của con trỏ, nhờ nó mà mọi thứ sống động, có chút hồn với user.
Xong xuôi thì thấy vui vui.
Vẫn là cái cảm giác tự mò, tự học, tự làm – thứ khiến mình hạnh phúc hơn việc gặp lại NYC gấp nhiều lần.
Cuối tuần_thứ 7, 05/07/2025.
