44 Hiệu ứng bằng JS cho Blog web

- Cây thư mục
Đây là đoạn JavaScript nhỏ giúp bạn tạo một mục lục dạng "cây thư mục" đơn giản.
- Hình ảnh 3D ảo
Đoạn mã giúp tạo hiệu ứng 3D.
- Bộ tìm kiếm đơn giản Bạn muốn tạo một trang tìm kiếm riêng cho website của mình mà không cần sự hỗ trợ của các website khác, nhưng bạn chẳng biết tí chút gì về các ngôn ngữ lập trình web như: PHP, ASP, CGI... Vậy xin mời bạn hãy vào website e-Chip để download bộ tìm kiếm viết bằng JavaScript này về, sau đó theo hướng dẫn bạn có thể tự tạo cho mình một trang tìm kiếm theo phong cách riêng của bạn.
- Background ấn tượng Bạn có thể làm trang Web của mình có ảnh nền thật ấn tượng với các bước: chọn một hình nền (chân trời) sẫm màu, mô phỏng thêm hiệu ứng mưa rơi, và cuối cùng là cho xuất hiện ngẫu nhiên hình tia sét. Chúc bạn thành công!
- Hiệu ứng Batman Mời bạn tải chương trình tạo hiệu ứng “batman” về dùng thử. Tương tự các hiệu ứng chuột khác, các chú dơi sẽ bay lượn quanh vị trí trỏ chuột. Nếu muốn bạn có thể giữ nguyên mã nguồn và thay đổi hình ảnh cho hợp với trang Web của mình.
- Quay hình
Với một số logo có sẵn, tôi xin giới thiệu đoạn mã xoay vòng các hình ảnh. Bạn thay vđo logo trang Web mnh rồi đặt vị trí thể hiện ở góc trên trái, sẽ rất đẹp và “huyền bí”, chúc bạn thành công!
- Trắc nghiệm trực tuyến
Bạn cần làm một cuộc trắc nghiệm nho nhỏ để kiểm tra lại kiến thức của mnh ở một vđi lĩnh vực? Mời bạn dùng thử chương trnh “Trắc nghiệm trực tuyến”. Bạn chỉ cần thay đổi nội dung câu hỏi, đáp án là có thể mời bạn bè “thi đấu” tính điểm trên trang Web của mnh rồi.
- Ngoài kia... lá rơi đầy Tương tự như hiệu ứng tuyết rơi, mưa rơi... bạn có thể tạo một hiệu ứng thật đẹp trên trang Web của mình với những chiếc lá nhiều màu sắc, đủ các kích cỡ. Chương trình có trên Website eChíp mục Thư viện JavaScript cùng với các file ảnh đi kèm, mời bạn tải về dùng thử.
- Xem vùng tối của Trái Đất
Nếu bạn muốn xem bóng tối đang phủ trên vùng nào của Trái Đất ở thời điểm hiện tại, mời bạn tải chương trình này về dùng thử. Bạn có thể thay đổi giờ hệ thống để kiểm tra độ chính xác vùng tối trên bản đồ của chưong trình.
- Các kiểu menu
Bạn muốn tìm hiểu các kiểu xuất hiện thực đơn, bảng thông báo động khi rê chuột lên trên liên kết? Chương trình tôi giới thiệu sẽ lướt qua hơn 10 kiểu menu động, trong đó có cả những menu xuất hiện kèm theo hiệu ứng ngẫu nhiên. Tùy theo mục đích sử dụng và phần thiết kế trang trí của Website, bạn có thể tham khảo để chọn cho mình hiệu ứng phù hợp.
- Khoảng cách không phận
Xin giới thiệu cùng các bạn chương trình đo khoảng cách giữa một số thành phố ở các quốc gia. Bạn chọn điểm khởi hành và nơi đến, rồi chọn đơn vị tính ( theo kilomet hay theo dặm) rồi nhấp chuột vào nút “Đo khoảng cách”.
- Tạo mã HTML tự động Để thu hút nhiều khách tham quan vào web của bạn hơn thì bạn nên mở thêm một dịch vụ miễn phí nào đó, tôi xin đề cử dịch vụ thiết kế web. Người lướt Web chỉ cần nhập một vài thông tin là có thể tạo ra một trang Web đơn giản rồi!
- Hình chuyển động Có nhiều cách để chuyển động hình trong Website, cũng như với mỗi cách bạn có thể tạo nhiều đường chuyển động khác nhau. Xin giới thiệu một đoạn Script ngắn tạo chuyển động hình ngẫu nhiên.
- Hiệu ứng chuyển ảnh Xin giới thiệu cùng các bạn hiệu ứng chuyển tiếp đơn giản mà thật đẹp mắt. Mỗi khi người dùng nhấp chuột vào nút “Play” thì “Trang 1” và “Trang 2” sẽ được hoán đổi cho nhau. Bạn cũng có thể cài đặt thêm phần tự chuyển đổi theo thời gian cho trước.
- Màu và mã màu Đôi lúc bạn tự hỏi chọn màu background cho trang Web của mình như thế nào, và cần đối chiếu hiệu quả giữa một số màu thông dụng... Mời bạn vào Website e-Chíp tải chương trình về dùng thử. Khi bạn rê chuột lên ô màu nào thì background sẽ được đổi ngay thành màu đó, đồng thời giá trị số biểu diễn cho màu vừa chọn sẽ hiện ra bên dưới.
- Chọn hình nền cho Website Nếu e ngại những vị khách khó tính không hài lòng với “skin” của trang Web mình, bạn có thể cho phép họ tự chọn hình nền (background) tùy ý. Mời bạn tải chương trình về dùng thử, sau đó bạn sưu tầm thêm nhiều hình nền đẹp để bổ sung cho chương trình.
- Cuộn hình từ dưới lên
Bạn có thể đưa file hình thích hợp vào đoạn mã JavaScript tôi giới thiệu để cuộn hình. Với cách thể hiện này bạn có thể tự tạo một “banner” cho trang Web của mình.
- Hình nền trên Website Khi bạn kéo thanh trượt, hình nền vẫn đứng yên tạo cảm giác chuyển động rất mượt và hấp dẫn. Bạn có thể tham khảo mã nguồn để thay hình ảnh thích hợp hơn cho Website của mình.
- Rung chuyển liên kết Các hình ảnh liên kết sẽ chuyển động liên hồi khi bạn rê chuột vào khung ảnh. Hiệu ứng này gây sự chú ý đặc biệt đến người lướt Web và giúp trang Web bạn sinh động hơn.
- Tùy biến màu sắc trang Web Cho phép người dùng tự chọn màu sắc thể hiện văn bản, màu nền cũng là một điều lý thú phải không bạn? Bạn có thể thay đổi giao diện khác đi theo ý thích của mình và tăng thêm số màu thể hiện cho phong phú hơn.
- Hồ cá trên Web
Các bạn hẳn đã quen với các hiệu ứng nền động như mưa rơi... sao bạn không vào website e-CHÍP để tải chương trình này về dùng thử? Chỉ cần kết hợp vài hiệu ứng là bạn có ngay một... hồ cá các loại trên Web rồi!
- Liên kết trên Website Các liên kết “nóng” thường dùng được đưa vào một khung thể hiện rất tiện lợi và rõ ràng đối với người lướt Web. Khi rê chuột đến liên kết nào đó, một mũi tên đỏ sẽ nhấp nháy ngay trước liên kết.
- Hiệu ứng banh rơi
Trái banh sẽ dội xuống đáy màn hình (điểm bắt đầu ở vị trí bạn nhấp chuột) và nảy lên, độ cao giảm dần cho đến khi chuyển động dừng hẳn. Bạn có thể áp dụng hiệu ứng rất đẹp mắt này cho một dãy các ký tự.
- Vẽ biểu đồ Biểu đồ trong Office thật đơn giản phải không bạn, tuy nhiên tôi muốn giới thiệu với các bạn một cách thể hiện biểu đồ trên trang Web dùng JavaScript. Các bạn có thể nhập thẳng số liệu vào các ô nhập liệu, sau đó nhấp chuột vào nút “vẽ”, thế là xong!
- Đồng hồ đeo tay Đồng hồ gắn trên các website thường là “điện tử” (không có kim) hoặc là dạng đồng hồ “treo tường”, tôi xin giới thiệu với các bạn một chiếc đồng hồ đeo tay rất dễ thương, ngoài chức năng báo giờ (đương nhiên) nó còn báo luôn thứ mấy trong tuần, ngày mấy trong tháng...
- Xem mã màu Đây là chương trình cho phép bạn có được mã RGB từ các màu thường gặp, bạn có thể thêm sáng, hoặc cho màu gốc tối đi. Nếu muốn, bạn cũng có thể gõ trực tiếp các thông số RGB (theo dec hoặc hex) để xem thử hiệu quả màu mình chọn.
- Đồng hồ JavaScript Xin giới thiệu cùng các bạn một chiếc đồng hồ có vẻ đẹp rất cổ điển. Bạn hoàn toàn có thể "treo" chiếc đồng hồ này lên trang Web của mình.
- Ẩn - hiện logo Cho logo của mình xuất hiện cố định trên Website đôi lúc cũng nhàm chán, bạn có thể thử cho logo bay "lòng vòng" trên trang quảng cáo. Logo sẽ chợt ẩn chợt hiện nên không làm "rối" tầm nhìn của người lướt Web.
- Tạo hiệu ứng cho liên kết Bạn có thể thêm nhiều ý nghĩa hơn cho các liên kết bằng cách hiển thị thêm hình và/hoặc logo của Website được liên kết. Hình ảnh sẽ được hiện ra khi người lướt Web trỏ chuột vào liên kết.
- Không gian ảo Tương tự hiệu ứng "mưa rơi". Tuy nhiên, bạn thay đổi hướng di chuyển thành trái-phải hoặc phải-trái, đồng thời tạo ra các mức tốc độ di chuyển khác nhau (nhằm tạo chiều sâu như không gian 3 chiều, ở tốc độ bằng nhau vật thể ở gần trông như chuyển động nhanh hơn). Như vậy là trang Web của bạn xem như được đặt vào một không gian huyền ảo rồi đó.
- Menu động Menu cho trang web được thiết kế với màu sắc trang nhã, dễ theo dõi. Khi bạn di chuyển chuột đến một mục nào trong menu, chú gà con - “linh vật” của e-Chíp sẽ bay theo. Bạn chỉ cần tìm một góc thích hợp để trình bày menu này trên trang web của mình thôi.
- Hồ cá “Java” Screensaver – trình bảo vệ màn hình đôi khi còn giúp chúng ta có những giây phút thư giãn với các hình ảnh hết sức tuyệt vời đi kèm. Xin giới thiệu cùng các bạn một “hồ cá” thật dễ thương mô phỏng các Screensaver để “ngâm cứu”.
- Khung hình di động Tương tự thủ thuật soi hình, tuy nhiên bạn phải làm cho khung hình trong suốt để tăng độ hấp dẫn. Khách thăm website của bạn sẽ nhấp và giữ chuột trái, sau đó di chuyển chuột để xem hình ảnh (hay nội dung) bên dưới.
- Đôi mắt lém lỉnh... Bạn hãy thử tải đoạn JavaScript này về rồi thử xem, khi bạn di chuyển chuột đến đâu, đôi mắt sẽ “liếc” theo đến đó. Chỉ khi nào bạn di chuyển chuột ra ngoài vùng thể hiện của trang web thì đôi mắt này mới bị “ngoài vùng phủ sóng” thôi.
- Liên kết... đẹp như trong phim Đoạn mã JavaScript được sử dụng để truyền các thông số cho một JavaApplet, các liên kết di chuyển trông như đoạn phim đang chiếu. Hiệu quả thật tuyệt vời phải không các bạn? Mã nguồn ngắn gọn và rất đơn giản, bạn chỉ cần thay đổi các liên kết cho phù hợp với website của mình.
- Thần tình yêu trên... trang web của bạn
Nhiều hình ảnh của vị thần tình yêu sẽ bay... lơ lửng trên trang web của bạn. Tuy nhiên bạn có thể thay đổi số lượng hình ảnh, tốc độ di chuyển hình,vv... thật dễ dàng ( chương trình có chú thích chi tiết các thông số ). Kỹ thuật di chuyển ảnh dùng “layer” này cũng thường được sử dụng trong các minigame viết bằng Javascript trên mạng, bạn thử tìm hiểu xem.
- Ánh đèn sân khấu Chú gà e-Chíp đang “hăm hở” dưới ánh đèn sân khấu... thật đẹp và hấp dẫn phải không bạn? Hiệu ứng đèn “follow” chiếu theo từng vùng trên ảnh đích có thể sẽ làm ngạc nhiên và gây ấn tượng với những vị khách tham quan website của bạn. Chương trình có thể tải về từ website e-Chíp mục “Thư viện Javascript”.
- Phóng to và thu nhỏ ảnh Bạn chỉ cần rê chuột lên các mục “Phóng to”, “Bình thường”, hay “Thu nhỏ” để điều chỉnh kích cỡ ảnh. Thật thuận tiện và đơn giản phải không bạn?
- Xoay hình Nếu bạn đã thiết kế một logo cho mình và đặt lên trang web thì tại sao bạn không thử cho logo đó xoay ở một góc màn hình nhỉ? Bạn có thể tải về và tìm hiểu đoạn chương trình tôi giới thiệu rồi cải tiến cho phù hợp với trang web của bạn. Công đoạn sau cùng chỉ là... thay đổi logo mới thôi.
- Soi ảnh trên Web bằng... kính lúp Xin giới thiệu với các bạn một “chiêu” hấp dẫn: dùng kính lúp soi ảnh trên web. Người lướt web dùng chuột để “nắm” kính lúp và khi chuột di chuyển, kính lúp sẽ soi theo, phần ảnh phóng to tương ứng hiển thị gần bên. Đây là một hiệu ứng rất độc đáo và công phu, mong là các bạn sẽ thích...
- Con trỏ chuột Có rất nhiều các trang trí cho con trỏ chuột ( đồng hồ, chữ, hình ảnh xoay quanh, vv...) và độ sinh động của chúng đối với người lướt web cũng rất khác nhau. Xin giới thiệu với các bạn một “chiêu” về con trỏ chuột khá hấp dẫn: các quả bóng “dí” theo tọa độ chuột, đồng thời xoay vòng tạo ra những chuyển động rất đẹp mắt và hấp dẫn.

Link Download

http://www.fileden.com/files/2008/1/26/1721910/44HieuUngBangJSChoWeb.rar