nTuts

Thêm "trọng lực" vào website của bạn với jGravity

Neo — Fri, 16 Nov 2012 11:25:48 +0000

jGravity là một plugin của jQuery giúp thêm trọng lực vào tất cả các thành phần trên website của bạn (giống như 'Google Gravity').

Cách sử dụng

Tất cả những gì bạn cần là thêm đoạn mã $('body').jGravity(); để cho hiệu ứng thực thi. Bạn có thể gọi hàm jGravity với các phần tử khác nhưng sẽ tốt nhất với thẻ body. Phiên bản này được thử nghiệm với jQuery 1.7.2.

- Thêm jQuery và jGravity:

Cuộn nội dung với Sly

Neo — Wed, 14 Nov 2012 13:20:33 +0000

Hẳn bạn đã biết đến dạng slide carousel với plugin rất nổi tiếng carouFredSel. Với Sly bạn còn có nhiều lựa chọn hơn nữa: cuộn ngang, dọc, cuộn nội dung vô tận (ví dụ như khi bạn xem feed ở facebook).

Cũng như carouFredSel, bạn có thể dùng Sly để cuộn bất kỳ phần tử nào của HTML (thẻ div, thẻ image, li...). Plugin cũng cho bạn nhiều lựa chọn khác nhau như tự động đặt vị trí cho phần tử tiếp theo hoặc luôn luôn căn giữa phần tử.

Lựa chọn "dragContent" giúp bạn dùng chuột kéo các nội dung trong slide (tuy nhiên khi thử trên thiết bị cảm ứng thì chưa được).

Cách sử dụng

Sử dụng Sly cũng giống như các plugin khác của jQuery, rất đơn giản:

- Thêm jQuery, Sly và các plugin mà Sly yêu cầu:

Tổ hợp phím tắt cho trang web với jwerty

Neo — Sun, 28 Oct 2012 04:56:31 +0000

jwerty là một thư viện javascript giúp bạn dễ dàng tạo các tổ hợp phím tắt cho website của mình. jwerty là một thư viện nhỏ (khoảng 1.5kb khi đã nén) và không yêu cầu một frameworks javascript nào khác. Tất nhiên là nếu website của bạn có gắn sẵn các javascript framework như jQuery, Zepto.js hay Ender thì jwerty vẫn hoạt động tốt.

Menu 3D với jQuery và CSS3

Neo — Thu, 25 Oct 2012 11:54:44 +0000

Makisu là một dạng menu 3D rất mới với hiệu ứng gập khá mượt mà. Makisu sử dụng các thuộc tính 3D của CSS3 và jQuery để tự động chuyển các dạng list (dd, li) thành dạng 3D gập. Việc này tương đương với bạn phải sử dụng trình duyệt mới, hỗ trợ 3D, rất may là ở những trình duyệt không hỗ trợ thì plugin sẽ hiển thị thành dạng list bình thường.

Plugin có các lựa chọn tùy biến như thời gian thực hiện hiệu ứng, mầu sắc, perspective (chưa rõ là cái gì, liên quan đến việc transform 3D).

Hướng dẫn sử dụng

Trước tiên là thêm jQuery và Makisu vào website:

<script src="jquery.1.8.0.js"> </script>
<script src="js/makisu.js"> </script>

Bạn có thể sử dụng mã HTML dạng ul li, demo của site dùng dd như sau:

Xây dựng website huy động vốn với Selfstarter

Neo — Wed, 24 Oct 2012 04:30:06 +0000

Huy động vốn từ cộng đồng đang là một cách rất tuyệt vời để giúp phát triển dự án khởi nghiệp của bạn. Bạn hẳn đã biết đến hình thức này thông qua website Kickstarter.

Tạo một feed duy nhất từ các mạng xã hội khác nhau nhờ jQuery Socialist

Neo — Tue, 23 Oct 2012 15:20:48 +0000

Nếu bạn đang hoạt động ở nhiều mạng xã hội, bạn sẽ có nhiều tài khoản, rất nhiều cập nhật cần phải kiểm tra. Vậy tại sao bạn không gắn tất cả vào một trang web của riêng mình, với cách hiển thị cũng của riêng mình? Điều này giúp bạn tiết kiệm thời gian và trở nên chuyên nghiệp hơn.

jQuery Socialist là một plugin giúp bạn tổng hợp các hoạt động từ nhiều mạng xã hội khác nhau vào một trang duy nhất.

Plugin này có thể lấy nội dung từ Facebook, Twitter, LinkedIn, YouTube, RSS và rất nhiều các trang khác; sau đó tổng hợp lại thành một nội dung hiển thị ở dạng giống như Pinterest. Tất nhiên là bạn có thể tự thiết kế riêng cho mình một kiểu hiển thị (cần biết một chút về thiết kế, CSS và JS)

Plugin cho WordPress đang được phát triển, sắp tới có thể có cả Drupal nữa!

Các phím tắt của Windows 8

Neo — Sun, 21 Oct 2012 14:09:49 +0000

Chỉ còn 5 ngày nữa (26/10/2012) là Microsoft sẽ chính thức giới thiệu hệ điều hành mới: Windows 8. Hệ điều hành mới này của Microsoft sẽ là nền tảng chung cho nhiều loại thiết bị, từ các loại máy tính truyền thống đến các loại máy tính bảng màn hình cảm ứng. Ở Windows 8, nút windows được sử dụng nhiều hơn, có thêm các thao tác di chuột vào các góc màn hình có nhiều lựa chọn (giống ở Mac OS nhưng hình như windows 8 chưa cho tùy biến lựa chọn ở các góc này). Và tất nhiên, Windows 8 có nhiều nút tắt mới giúp bạn tiết kiệm thời gian hơn khi làm việc.

Hiệu ứng tilt-shift với photoshop CS6

Neo — Sun, 21 Oct 2012 04:40:39 +0000

Một điểm mới của Photoshop CS6 là khả năng tạo hiệu ứng tilt-shift nhanh chóng. Trong bài viết này tôi sẽ thử tạo hiệu ứng tilf-shift, bạn sẽ thấy việc này gần như là không mất thời gian. (Bạn có thể xem lại bài hướng dẫn tạo hiệu ứng tilf-shift với các phiên bản photoshop trước, bạn sẽ thấy mất thời gian hơn và hiệu quả thường là không được như ý muốn)

Cycle2 - Slideshow đã tốt nay còn tốt hơn

Neo — Sat, 20 Oct 2012 11:05:30 +0000

Nếu đã từng tìm hiểu về jQuery slideshow plugin, hẳn bạn đã biết jQuery Cycle, một plugin rất phổ biến & lâu đời về slideshow. Mới đây plugin đã được nâng cấp lên phiên bản mới: Cycle2.

Cycle2 trở thành sự lựa chọn hoàn hảo cho việc tạo & tùy biến slideshow. Cycle2 hỗ trợ responsive layout, bạn có thể tùy biến mọi thứ ở slide của mình (thậm chí là chỉnh sửa từng slide của 1 slideshow thông qua API của Cycle2).

Phiên bản mới hỗ trợ việc tải ảnh khi cần thiết. Ví dụ khi bạn tạo 1 slideshow không chạy tự động (người dùng phải ấn nút để chuyển slide),ảnh sẽ chỉ được tải về khi người dùng ấn nút chuyển slide, giúp tiết kiệm nhiều băng thông.

Cycle2 hỗ trợ các hiệu ứng fade, scroll, shuffle, tile và carousel. Mỗi slide có tùy chỉnh URL riêng vã hỗ trợ cho mobile (vuốt để slide).

Thanh cuộn trên web mang phong cách OSX với SlimScroll

hunginf — Fri, 05 Oct 2012 16:13:44 +0000

Tương tự LionBars, SlimScroll là 1 plugin khác của jQuery hỗ trợ cho người làm web tạo ra một thanh cuộn mang cá tính mới cho trang web của mình.

Trước tiên phải có thư viện jQuery , jQuery-UI và SlimScroll. Sau đó thêm đoạn mã: