Danh mục: Javascript

Đây là code javascript mình sử dụng cho nhiều trang với chứng năng good nhất có thể
– Tùy chỉnh vị trí hiển thị
– Tùy chỉnh text, ảnh, html,… hiển thị
– Chỉ hiển thị khi nội dung trang dài
– Code đơn giản nhẹ, dễ sử dụng

Hãy để tuyết rơi!!!

Snowstom là một hiệu ứng viết bằng javascript có thể dễ dàng thêm vào các trang web. Nó hoàn toàn miễn phí và rất dễ dàng thiết lập. Snowstom chỉ gói gọn trong 1 tệp tin js không sử dụng hình ảnh cho các hiệu ứng tuyết điều này giảm đáng kể dung lượng cho trang web.

Để sử dụng tất cả điều bạn cần làm là download file snowstorm về tại đây:

github.com/scottschiller/snowstorm/

hoặc tại trang web của tác giả: http://www.schillmania.com/projects/snowstorm/

Sau đó bạn upload file snowstorm.js lên hosting và chèn dòng mã sau vào trang web của bạn:

<script src="snowstorm.js"></script>

Bạn có thể tùy chỉnh tốc độ tuyết rơi nhanh hay chậm, số lượng bông tuyết rơi cùng lúc, tốc độ gió, hướng gió di chuyển theo chuột

Snowstom tương thích hầu hết các trình duyệt cũ (IE 5.x +, Netscape 6 +) cũng như các trình duyệt mới IE 6, 7, 8, Firefox, Safari, Opera.

Snowstom tương thích với các trình duyệt trên các thiết bị di động iPhone, iPad và Android. Tuy nhiên Snowstom sẽ ngốn nhiều CPU khi chạy vì vậy với các thiết bị di động các bạn có thể thiết lập snowStorm.excludeMobile = false để người dùng thiết bị di động khi vào trang web của bạn sẽ không bị treo máy, hao pin.

Tùy biến Snowstorm

Bạn có thể tùy chỉnh các hiệu ứng trong tệp snowstom.js hoặc bằng mã javascript trong trang web của bạn.

Ví dụ:

[html]
<!– required snowstorm JS, default behaviour –>
<script src="snowstorm.js"></script>

<!– now, we’ll customize the snowStorm object –>
<script>
snowStorm.snowColor = ‘#99ccff’; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>
[/html]

Tham khảo một số thuộc tính và phương thức của snowstom bên dưới nhé:

Configurable Properties

Snowstorm can be fairly easily customized; some of the major properties are listed below.

snowStorm.autoStart = true;

Whether the snow should start automatically or not.

snowStorm.animationInterval = 33;

Theoretical “miliseconds per frame” measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower

snowStorm.flakeBottom = null;

Limits the “floor” (pixels) of the snow. If unspecified, snow will “stick” to the bottom of the browser window and persists through browser resize/scrolling.

snowStorm.flakesMax = 128;

Sets the maximum number of snowflakes that can exist on the screen at any given time.

snowStorm.flakesMaxActive = 64;

Sets the limit of “falling” snowflakes (ie. moving on the screen, thus considered to be active.)

snowStorm.followMouse = true;

Allows snow to move dynamically with the “wind”, relative to the mouse’s X (left/right) coordinates.

snowStorm.freezeOnBlur = true;

Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user.

snowStorm.snowColor = '#fff';

Don’t eat (or use?) yellow snow.

snowStorm.snowCharacter = '•';

&bull; (•) = bullet. &middot; entity (·) is not used as it’s square on some systems etc. Changing this may result in cropping of the character and may require flakeWidth/flakeHeight changes, so be careful.

snowStorm.snowStick = true;

Allows the snow to “stick” to the bottom of the window. When off, snow will never sit at the bottom.

snowStorm.targetElement = null;

Element which snow will be appended to (default: document body) – can be an element ID string eg. ‘myDiv’, or a DOM node reference.

snowStorm.useMeltEffect = true;

When recycling fallen snow (or rarely, when falling), have it “melt” and fade out if browser supports it

snowStorm.useTwinkleEffect = true;

Allow snow to randomly “flicker” in and out of view while falling

snowStorm.usePositionFixed = false;

true = snow not affected by window scroll. may increase CPU load, disabled by default – if enabled, used only where supported.

snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;

Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.

Methods

Snowstorm has a few basic methods for controlling the snow effect.

snowStorm.randomizeWind()

Sets the wind speed with a random value relative to vMaxX and vMaxY properties.

snowStorm.freeze()

Stops the snow effect in place.

snowStorm.resume()

Continues snowing from a “frozen” state.

snowStorm.toggleSnow()

Enables or disables the snow effect depending on state, same as calling freeze() or resume().

snowStorm.stop()

Freezes and kills the snowstorm effect, and removes related event handlers. Snowstorm will not work properly if other methods are called after stop().

Rất đơn giản phải không nào. Xem demo của mình tại đây nhé: http://hanamonline.com/?s=snow khi nào thích xem tuyết rơi cứ vào trang của mình xem tự nhiên nha 🙂

“Harlem Shake“, điệu nhảy có phần ngớ ngẩn, điên loạn đang gây nên cơn rung chấn cuồng nhiệt trên internet và hứa hẹn sẽ là đối thủ đáng gờm của Gangnam Style trong năm nay. Bắt đầu từ sự ngẫu hứng của chàng trai Filthy Frank và đám bạn khi nghe ca khúc Harlem Shake của Baauer bỗng dưng bật dạy nhảy như điên loại và đã tạo một trào lưu mới trên mạng internet.
Hiện tượng Harlem Shake lan nhanh đến nỗi nó xuất hiện ở khắp mọi nơi với đủ thành phần tham gia. Để góp vui vào trào lưu mới này, trang chia sẻ video hàng đầu thế giới là YouTube cũng “lắc” theo điệu Harlem Shake theo cách riêng của họ. Giờ đây khi bạn tìm kiếm trên YouTube với từ khóa [do the harlem shake] sẽ thấy các kết quả của trang tìm kiếm nhảy điên loạn như thế này với hành động đầu tiên của logo.
http://www.youtube.com/results?search_query=do the harlem shake

Còn bạn thì sao? Hãy cùng hưởng ứng điệu nhảy này nào. Mình sẽ hướng dẫn các bạn 2 cách đơn giản

1. Dùng công cụ sẵn có:

Cách này chỉ đơn giản là vào trang http://hsmaker.com, sau đó nhập url website của bạn vào, thế là xong. Lúc này muốn chia sẻ cho ai đó bạn chỉ cần copy URL trên thanh address rồi gửi cho họ là xong. URL của bạn sẽ có dạng http://hsmaker.com/harlemshake.asp?url=[url_của_bạn]. Nếu muốn chèn vào trang web của bạn bạn có thể dùng iframe hoặc redirect qua là được.

2. Tự tạo hiệu ứng Harlem Shake bằng Javascript:

Đầu tiên, tải về các đoạn mã sẽ dùng trong phần này tại đây. Lưu ý là script này mình cũng sưu tầm thôi hình như là nó ko miễn phí đâu nhé (6$ thì phải)

Upload file harlem.css và harlem.min.js lên hosting của bạn. Lưu ý với file harlem.css cần upload ngang hàng với index.

Chèn đoạn mã sau vào phía trên thẻ </body>:

[html]
<script type="text/javascript" src="harlem.min.js"></script>
<script type="text/javascript">// <![CDATA[
var harlem = null;
$ (function ()
{
harlem = $ .fn.speedoHarlem();
});
// ]]></script>
[/html]

Lưu ý cấu hình đúng đường dẫn đến file harlem.min.js. Sau đó hãy quay lại website để thưởng thức thành quả. Demo của mình http://hanamonline.com/?s=halem+sharke . Chúc thành công.

jQuery Mega Menu là 1 jquery plugin được phát triển bởi GeekTantra. Với MegaMenu bạn có thể dễ dàng tạo menu theo phong cách riêng của mình. MegaMenu hỗ trợ menu hiển thị với nhiều hiệu ứng như slideDown/slideUp, fadeIn/fadeOut và các hiệu ứng đơn giản khác. MegaMenu rất nhẹ vì chủ yếu sử dụng CSS và javascript làm nền tảng. Với MegaMenu việc của bạn là sáng tạo menu tạo ra các HTML và việc còn lại là chèn nó cùng với MegaMenu vào website của bạn.
Nếu bạn đã sử dụng MegaMenu thì bạn cũng sẽ dễ dàng hiểu rằng tại sao rất nhiều website lớn trên thế giới sử dụng nó như:

Walmart

Adidas

Nike

và nhiều website khác như mydeco.com, like.com….

Ở Việt Nam có nhiều website lớn sử dụng MegaMenu như Zing, Mediamart…

Download Jquery Mega Menu tại đây: jquery-megamenu.2.0.zip

Để sử dụng:

Trong phần header của HTML thêm như sau:

[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="javascripts/jquery.megamenu.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery(".megamenu").megamenu();
});
// ]]></script>
[/html]

Tiếp theo trong body thêm đoạn code sau:

[html]</pre>
<ul class="megamenu">
<li><a href="javascript: void(0)">First Menu</a>
<div style="width: 350px;">Contents of the first mega menu</div></li>
<li><a href="javascript: void(0)">Second Menu</a>
<div style="width: 350px;">Contents of the second mega menu</div></li>
</ul>
<pre>
[/html]

Nếu bạn sử dụng MegaMenu bạn sẽ thấy nó thật tuyệt vời. Để tham khảo thêm các bạn truy cập trang chủ của MegaMenu: http://www.geektantra.com/2009/09/jquery-mega-menu/.Chúc các bạn thành công.