2010-06-25 61 views
5

Ngày hôm khác tôi chỉ tình cờ ghé thăm trang web này: -Làm cách nào để tạo hiệu ứng này bằng javascript?

http://www.peter-pearson.com/

Ai có thể cho tôi biết làm thế nào tôi có thể tạo ra hiệu ứng này mát mẻ. Tôi biết cách cuộn ngang hoặc dọc trang bằng cách sử dụng localScroll của JQuery. Nhưng nếu bạn đã xem trang web, hãy xem kỹ các đường thẳng chạy trên nền. Nếu bất cứ ai có thể cho tôi biết thế nào là hiệu quả đã tạo ra tôi sẽ rất biết ơn :)

Trả lời

4

PNG với tính minh bạch alpha, trên nền:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[EDIT]

Nó không thực sự một hoạt ảnh, nhưng một mẹo nhỏ, dựa trên tính minh bạch.
Imagine HTML sau:

<div class="div1"> 
    <div class="div2"> 
    </div> 
</div> 

div1 có hình nền sọc-mô hình, vị trí như cố định, vì vậy nó sẽ di chuyển khi bạn di chuyển.
div2 có hình nền nền trong suốt, không cố định.

Vì vậy, khi bạn cuộn trang, hình mẫu sẽ xuất hiện ở một số vị trí, vì hình nền khác trong suốt, cho bạn một loại hiệu ứng hoạt ảnh.

+0

Cảm ơn Macmade, nhưng nó trông như thế nào là hoạt hình? – TCM

+0

Tôi không phải là nhà thiết kế. Xin vui lòng giải thích cho tôi khái niệm đằng sau nó một cách chi tiết. Làm thế nào là nó hoạt hình? – TCM

+0

Xem chỉnh sửa ...:) – Macmade

0

bạn có thể muốn kiểm tra bài đăng này:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

+0

anh ấy đã chỉ định anh ấy muốn có hiệu lực của đường kẻ. Phần này anh đã biết. Cố gắng tập trung vào phía bên tay trái của trang trong khi cuộn. một dòng đẹp đang theo dõi trang –

+0

Hi smeg4brains, tôi biết về điều đó. Nhưng nếu bạn nhìn vào trang web một cách cẩn thận, hãy xem các dòng, ba dòng chạy trong nền và cách chúng hoạt ảnh. Tôi đã thực sự nói về điều đó. – TCM

Các vấn đề liên quan