Hiệu ứng cuộn là một trong những hiệu ứng được sử dụng nhiều nhất trong thiết kết web. Và có vô số website sử dụng hiệu ứng cuộn này, với sự hỗ trợ của các thư viện JavaScript, để tạo nên các website với giao diện và cách hoạt động cực kì độc đáo.

Hôm nay trong bài viết này, jsB@nk sẽ giới thiệu với bạn danh sách 30 website được thiết kế cực kì độc đáo với hiệu ứng cuộn. Hãy vào trang chi tiết để xem, có thể chúng sẽ cung cấp cho bạn nhiều ý tưởng mới.

Hôm nay, jsB@nk muốn giới thiệu đến bạn cách thức để xây dựng một ứng dụng trò chơi đơn giản với kĩ thuật HTMl5 và JavaScript; tên ứng dụng này là Asteroid, và được jsB@nk đặt là Trò chơi tránh thiên thạch bởi cách chơi của nó: chỉ cần dùng các phím mũi tên để di chuyển nhân vật của mình (chiếc phi thuyền) né tránh các vật thể di chuyển ngẫu nhiên xung quanh.

Điểm đặc biệt của trò chơi này là nó được xây dựng hoàn toàn dựa trên kĩ thuật HTML5 với tập lệnh canvas - một ví dụ mẫu JavaScript khá tốt để giúp chúng ta làm giúp chúng ta tiếp cận với kĩ thuật mới này.

Hãy tìm hiểu thêm về canvas và HTML5 nếu bạn muốn thông qua các bài viết, hiệu ứng JavaScript khác trên jsB@nk:
- JavaScript xoay ảnh với CANVAS trong HTML5
- Ứng dụng đồ họa tuyệt vời với HTML5
- Các hàm JavaScript mới trong HTML5
- 12 trò chơi JavaScript đầy sáng tạo bạn nên chơi

Nếu thường xem phim truyện trên kênh truyền hình HBO hẳn bạn sẽ quen với câu khẩu hiệu "Simply the Best" mà jsB@nk đang sử dụng để đặt cho tiều đề bài viết này. jsB@nk muốn mượn khẩu hiệu này để nói lên tính chất của bài viết: nội dung này cung cấp cho bạn các khái niệm rất cơ bản về JavaScript, có thể nhanh chóng và dễ dàng tiếp cận, nắm vững ngôn ngữ lập trình web JavaScript.

Bài viết cung cấp các hướng dẫn chi tiết cùng với mã nguồn ví dụ JavaScript mẫu kèm theo. Hiện tại bài viết này có 5 danh mục và sẽ được cập nhật liên tục, trong khi chờ đợi, bạn có thể xem qua:
- Phần 1: Lớp trong JavaScript
- Phần 2: Kế thừa trong JavaScript
- Phần 3: JavaScript và JSON
- Phần 4: Thuộc tính Prototype
- Phần 5: Tầm vực trong JavaScript

Các bài viết hướng dẫn làm quen với JavaScript khác có trên jsB@nk:
- Hàm JavaScript & Biểu thức so trùng: Vài ví dụ cơ bản
- Tổng quan về Prototype của JavaScript
- 5 kĩ thuật kế thừa trong JavaScript nên nắm vững
- Kiểu và Đối tượng đơn giản trong LTHĐT JavaScript
- 10 eBook tốt nhất người mới học JavaScript nên đọc

Một bộ đếm thời gian (countdown timer) với giao diện cực kì độc đáo, bắt mắt và sáng sủa để hiển thị trên website của bạn. Hiệu ứng này sẽ đếm số tuần, số ngày và thời gian đến một thời điểm đã được định trước. Bên cạnh đó hiệu ứng còn cho phép người dùng chọn một trong hai giao diện đen hoặc trắng để sử dụng; đồng thời người dùng cũng có thể dễ dàng chỉnh sửa mã nguồn JavaScript hơn bởi hiệu ứng này sử dụng thư viện jQuery làm nền.

Thêm một hiệu ứng tạo bộ đếm thời gian cực kì độc đáo nữa được liệt vào bộ sưu tập các bộ đếm có trên jsB@nk:

- Đồng hồ đếm ngược
- Xây dựng bộ đếm thời gian đơn giản với Flash và ActionScript
- Bộ đếm thời gian dạng thanh với jQuery
- Tạo một bộ đếm thời gian giảm dần theo mô hình OOP
- Bộ đếm thời gian giảm dần đẹp tuyệt vời

Một hiệu ứng JavaScript sử dụng thư viện jQuery để tạo một khung hiển thị tiến trình tải (loading) cực kì độc đáo và đặc sắc trên trang web. Với phiên bản hiện tại được giới thiệu trên jsB@nk, hiệu ứng này cho phép bạn 4 kiểu hiển thị: 3 kiểu hiển thị dạng nút tròn và một kiểu dạng ảnh tự chọn.

Cùng với ví dụ mẫu JavaScript trực tiếp là tài liệu chi tiết cách thức chỉnh sửa mã nguồn JavaScript và hướng dẫn chi tiết, bạn hãy vào trang ví dụ mẫu để thưởng thức nhé.

Hãy thử thêm các hiệu ứng tạo tiến trình tải với JavaScript có trên jsB@nk nếu bạn thích:

- Tỉ lệ tải trang web
- Thanh tiến trình trên trang web
- Thanh phần trăm
- Thanh tiến trình

Uy lực mà jsB@nk muốn nói đến ở đây là mã nguồn JavaScript của hiệu ứng này được xây dựng với kĩ thuật hướng đối tượng rất công phu cùng với tài liệu sử dụng/chỉnh sửa rất chi tiết. Bạn có thể tạo nhiều đối tượng cuộn trên trang web như mong muốn cùng với không hạn chế phần tử trong mỗi đối tượng cuộn.

Chưa hết, bạn còn có thể dễ dàng khai báo tốc độ cuộn, vị trí cuộn, khoảng cách, thời gian, ... cho mỗi đối tượng cuộn trong hiệu ứng này.

Một hiệu ứng JavaScript đơn giản sử dụng thư viện jQuery để thực hiện việc thay đổi ảnh liên tục. Hiệu ứng mờ dần được sử dụng để hiển thị giữa các ảnh, bạn có thể dễ dàng thay đổi các hoạt hóa của hiệu ứng này với các hàm có sẵn của jQuery.

Cuộc sống thực tế có đôi lúc đặt chúng ta vào nhiều tình huống oái oăm, chẳng hạn như cần chỉnh sửa ngay lập tức một tấm hình (ảnh) ngay địa điểm hiện tại của bạn, nhưng bạn lại không có bất kì một phần mềm biên tập ảnh nào trong tay?

Đó cũng chỉ là lí do phụ, điều quan trọng hơn khi tôi muốn viết bài này là nhằm giới thiệu các công cụ biên tập, chỉnh sửa ảnh cực kì mạnh mẽ, không khác gì phần mềm Photoshop mà bạn thường sử dụng. Các công cụ chỉnh ảnh online này hoạt động trực tuyến trên nền web, và dĩ nhiên bạn sẽ không phải tốn bất kì chi phí nào khi so sánh với các phầm mềm ngoại tuyến truyền thống.

Các công cụ được giới thiệu trong bài viết này thực sự rất mạnh mẽ, có hầu như tất cả các chức năng phổ biến như: chỉnh ảnh sáng tối, ghép ảnh, thay đổi kích cỡ, cắt, xoay, các hiệu ứng ảnh đặc biệt, ... Và tôi cũng viết bài này cho 9BlogTips.com, vui lòng vào 18 Excellent Free Online Photo Editors Alternate Photoshop để xem thêm.

Tương tự như trò chơi Đập chuột chũi nhưng Đập mặt cười 1.2 này lại đơn giản hơn với việc thay đổi ảnh các chú chuột chũi bằng các nút nhấn hình mặt cười, mặt khóc, ... và nhiệm vụ của bạn là đập trúng các nút nhấn đại diện cho hình mặt cười trong thời gian cho phép càng nhiều càng tốt.

Trình diễn ảnh, trưng bày ảnh là những hiệu ứng không thể thiếu trong thế giới web, thế giới Internet từ thuở sơ khai. Bạn cũng có thể tìm thấy rất nhiều hiệu ứng JavaScript thuộc loại này trên [email protected]:

- JavaScript Trưng bày ảnh
- JavaScript Trưng bày ảnh 2
- JaS Gallery

Nhưng hôm nay trong bài viết này, [email protected] xin giới thiệu với các bạn danh sách 65 tiện ích, giải pháp trình diễn ảnh, trưng bày ảnh cực kì tuyệt vời mà miễn phí. Tất cả chúng đều dễ dàng cài đặt và sử dụng, chỉ hoàn toàn hoàn JavaScript, không dùng Flash nhưng vẫn tuyệt vời. Hy vọng bạn sẽ thích danh sách này.

Một số ứng dụng thật sự ấn tượng với [email protected]: Galleriffic, Slideviewer, Galleria, Spacegallery, Thickbox (jsB@nk đang sử dụng thư viện tiện ích jQuery này), Fancybox, MooFlow, Lightbox2, Minishowcase, CSS Image Gallery, Highslide JS.