Hướng dẫn thị sai jQuery?

Question

Tôi cần sử dụng thị sai jquery trong trang web tôi đang xây dựng cho khách hàng, tôi chủ yếu là nhà phát triển kết thúc, vì vậy tôi đang tìm hiểu thêm về giao diện người dùng và jquery, v.v .. Tôi đã xem qua các ví dụ như http://www.nikebetterworld.com/ và hướng dẫn Tôi lo lắng về vấn đề bản quyền vì vậy tôi đã tự hỏi nếu có ai đã phát hiện ra một hướng dẫn đáng tin cậy và dễ dàng cho người mới bắt đầu để tạo ra một hiệu ứng thị sai? Cảm ơn

Answer 1

Tôi rất muộn để đảng nhưng chỉ để ném nhau trong đó cho xúc tiến tự biết xấu hổ :), tôi đặt một hướng dẫn đơn giản cùng một vài ngày trước:

http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

Nếu bạn' có bất kỳ câu hỏi về bất cứ điều gì trên đó, cảm thấy tự do để cho tôi một tin nhắn và tôi có thể nói chuyện với bạn thông qua bất cứ điều gì bạn không chắc chắn về.

Answer 2

Một google nhanh chóng bật lên điều này.

http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

Answer 3

Tôi vừa hoàn thành làm việc trên một chỉ jesterday :) bạn nên xem xét sử dụng: http://johnpolacek.github.com/scrolldeck.js/ hoặc http://www.jarallax.com/demo/ (hoạt động trên android) #its một dự án hoàn toàn mới nên nó vẫn đang được phát triển

đối với các điểm cuộn có thể tùy chỉnh dễ dàng, bạn có thể sử dụng: http://cssdeck.com/labs/swayiqbq/2 (các đường cuộn mặc định khá hữu ích trong khi ghi đè của nó (từ slide đến trang trình bày trong scrolldeck.js))

Không chắc chắn nếu bạn đang làm việc trên mã chỉ, hoặc bạn đang làm cả đồ họa và mã, nếu kịch bản đầu tiên của nó, bạn nên dạy kèm thiết kế của bạn về cách hoạt động của nó để thực sự sử dụng hiệu ứng thị sai. Ngoài ra, làm cho mọi thứ trông hấp dẫn trong 1920x1080 như trong 1024x768 có thể là thách thức đầy thử thách trong một số trường hợp.

Answer 4

Một số hướng dẫn, xin lỗi vì bất kỳ những người trước đây đã đề cập trong chủ đề này:

• http://www.webdesignshock.com/one-page-website/
• http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
• http://www.richardshepherd.com/smashing/parallax/background.html
• http://www.franckmaurin.com/the-parallax-effects-with-jquery/
• http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

Một số, có thể, plugin hữu ích mà có thể làm việc tốt với sai:

• nội dung tải khi inview: https://github.com/protonet/jquery.inview
• Waypoints: http://imakewebthings.com/jquery-waypoints/
• Lateral trên cuộn nội dung trượt: http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
• Hoạt ảnh chậm trễ của jQuery: http://james.padolsey.com/javascript/jquery-delay-plugin/
• cuộn đến: http://demos.flesler.com/jquery/scrollTo/
• Scrollpath: http://joelb.me/scrollpath/

Tôi đặc biệt thích các plugin inview để kích hoạt hình ảnh động CSS3 khi di chuyển trong tầm mắt.

Và, một số ví dụ đáng yêu của các trang web sai hơn để tìm cảm hứng và mã snooping:

• http://www.mini.jp/event_campaign/big-point/
• http://www.kiinnostus.fi/autokuume/
• http://www.scozzese.com
• https://victoriabeckham.landrover.com/INT
• http://www.ws-interactive.fr/methode/
• http://swag2012.fr/
• http://activatedrinks.com/

http://www.awwwards.com dường như bị tràn với các trang web sai.

Answer 5

thử này quá :) thực sự dễ sử dụng và tùy chỉnh http://johnpolacek.github.com/scrolldeck.js/

Answer 6

Ở đây tôi đã thu thập được một số các hướng dẫn di chuyển sai tốt nhất từ ​​các trang web khác nhau, bạn có thể học hỏi từ đó. Đây là liên kết http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/