bodev.vn

Lab.

Hiệu ứng web chia theo ngành. Xem demo, đọc cách làm.

Code để tham khảo, không phải thư viện: không đảm bảo chạy ngay trên site của bạn.

Bất động sản

Trang dự án, chọn căn, tiến độ thi công.

  1. 01HTML · JS

    Mở màn trang dự án

    Tên dự án hiện từng chữ, tòa nhà mọc lên, số liệu tự đếm.

  2. 02HTML · JS

    Chọn tầng, xem căn trống

    Rê chuột lên tòa nhà để chọn tầng. Bảng bên cạnh hiện căn còn, đã cọc, đã bán.

  3. 03HTML · JS

    Tiến độ dự án cuộn ngang

    Cuộn dọc nhưng nội dung chạy ngang. Đường tiến độ vẽ dần theo từng mốc.

  4. 04HTML · JS

    Bản đồ tiện ích quanh dự án

    Vòng bán kính 1/3/5 km lan ra, ghim trường, bệnh viện, mua sắm rơi xuống theo nhóm, xe chạy về trung tâm.

Nội thất

Dựng phòng, dạo căn hộ, phối màu.

  1. 01HTML · JS

    Lắp ráp căn phòng

    Phòng isometric dựng dần theo cuộn: sàn, tường, đồ đạc rơi vào chỗ, cuối cùng bật đèn.

  2. 02HTML · JS

    Đi xuyên cửa

    Cuộn là bước tới: zoom qua khung cửa để sang phòng tiếp theo. Phòng khách, bếp, phòng ngủ.

  3. 03HTML · JS

    Phối màu bằng vòng xoay

    Cuộn làm xoay vòng màu, cả căn phòng đổi phong cách: Scandinavian, Indochine, Japandi…

Kiến trúc & kỹ sư

Bản vẽ tự dựng, tách tầng, hồ sơ dự án.

  1. 01HTML · JS

    Bản vẽ thành công trình

    Mặt đứng nhà phố tự vẽ dần theo cuộn: lưới trục, khối, chi tiết, kích thước, rồi quét ra phối cảnh.

  2. 02HTML · JS

    Tách tầng công trình

    Tòa nhà isometric ráp lại rồi tách từng tầng theo cuộn. Mỗi tầng sáng lên kèm công năng, diện tích.

  3. 03HTML · JS

    Hồ sơ dự án xếp chồng

    Thẻ dự án trượt lên chồng lên nhau như xấp hồ sơ. Thẻ cũ lùi ra sau, bộ đếm lật số.

  4. 04HTML · JS

    Mặt cắt thông gió nhà ống

    Mặt cắt nhà phố tự vẽ, nắng rọi qua giếng trời, gió chạy xuyên các tầng rồi thoát lên mái.

Nghệ thuật

Triển lãm 3D, kể chuyện tác phẩm, tường tranh kéo thả.

  1. 01HTML · JS

    Phòng trưng bày 3D

    Cuộn là đi dọc bức tường tranh trong không gian 3D. Tranh tới giữa thì sáng đèn, hiện bảng tên.

  2. 02HTML · JS

    Đi sâu vào bức tranh

    Cuộn là zoom lần lượt vào từng chi tiết của bức sơn mài, kèm chú thích. Bản đồ nhỏ cho biết đang xem chỗ nào.

  3. 03HTML · JS

    Bức tường vô tận

    Kéo theo mọi hướng, tường tranh lặp mãi không hết, thả tay còn trôi. Bấm vào tranh để phóng to bằng Flip.

Du lịch & khách sạn

Hành trình, điểm đến, resort.

  1. 01HTML · JS

    Hành trình Hà Giang

    Tuyến đường vẽ dần trên bản đồ, xe chạy theo, tới mỗi điểm dừng thì hiện ảnh và đồng hồ km nhảy số.

Cơ bản

Hiệu ứng nhỏ, dùng ở đâu cũng được.

  1. 01HTML · JS

    Cuộn mượt toàn trang

    Lenis chạy theo nhịp GSAP: cả trang cuộn mượt, ScrollTrigger vẫn khớp nhịp. Có nút tắt để so sánh.

  2. 02React

    Chữ co giãn theo chuột

    Chữ gần chuột thì đậm và rộng ra. Dùng variable font, không tải thêm gì.

  3. 03React

    Nút nam châm

    Chuột lại gần thì nút bị hút theo. Rời ra thì bật về như lò xo.

  4. 04React

    Lưới xáo trộn bằng Flip

    Đổi bố cục tùy ý. Flip tự tính đường bay cho từng ô.