10个关于视差滚动效果的教程和插件

     <div id="news_body">     <p>        近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很 具有吸引力，它就是视差滚动效果。视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，可以带来非常出色的视觉体验。</p>     <p>        随着这种炫酷的效果首次在 Nike 2011 年的 <a target="_blank">Nike Better World</a> 项目中完美展现，如今这种视差滚动效果被越来越多的国外网站所应用，成为 Web 设计的热点趋势。因此，本文整理了十种关于此效果的教程和插件和大家分享，希望为你的网站设计提供一些灵感。</p>     <p>        不过有两个方面需要读者注意：</p>     <ol>      <li>以大量图片为特色的网站应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验；</li>      <li>某些网站页面在移动设备上的效果可能较之在 PC 上有所不同，一些功能也可能无法正常使用。</li>     </ol>     <p>        <strong>1、<a href="/misc/goto?guid=4958334011017323875" target="_blank">Parallax Slider</a></strong></p>     <p>        一个超级棒的插件，为你的网站提供纵深和滑动效果。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/5c2f1d8f20bb83b64770a53aebf6cc20.jpg" width="450" height="174" /></p>     <p>        <strong>2、<a href="/misc/goto?guid=4958334011818509329" target="_blank">Javascript 视差效果</a></strong></p>     <p>        一份帮助你增加网页立体层次感的教程。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/e97b83cd852e76b1928d3c39bfb79139.jpg" width="450" height="174" /></p>     <p>        <strong>3、<a href="/misc/goto?guid=4958334012614570949" target="_blank">Nike Better World 场景的背后</a></strong></p>     <p>        一份为那些急切想重现 NIKE 网站滚动效果的设计师准备的教程。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/ca8729e001c67eb90764db960df4c7a2.jpg" width="450" height="174" /></p>     <p>        <strong>4、<a href="/misc/goto?guid=4958334013407819848" target="_blank">用 jQuery 和 CSS 构建一个具有视差滚动效果的网站界面</a></strong></p>     <p><strong>        </strong></p>     <p>        一份为那些想在此领域了解的更深的设计师准备的例子和教程。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/376b75ab660fba184a6f7ebf88cc4ca9.jpg" width="450" height="225" /></p>     <p>        <strong>5、<a href="/misc/goto?guid=4958334014203191316" target="_blank">用 JQuery 创建一个时尚的具有视差背景的效果</a></strong></p>     <p>        一份教程，在背景上帮你添加一些滚动的云彩。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/bbac53ac518936e44823c5bf80fbc941.jpg" width="450" height="174" /></p>     <p>        <strong>6、<a href="/misc/goto?guid=4958188531590251782" target="_blank">动画背景式的网页头部</a></strong></p>     <p>        用一个动画式的网页头部来让你的访问者为你欢呼吧！</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/7851dc3879fe353c4270b4ecb355b3c6.jpg" width="450" height="174" /></p>     <p>        <strong>7、<a href="/misc/goto?guid=4958334015731415459" target="_blank">视差滚动教程</a></strong></p>     <p>        一份视差效果和内容同时出现的有趣的教程。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/eb857214c9cb2310d93e63d9dc17043b.jpg" width="450" height="174" /></p>     <p>        <strong>8、<a href="/misc/goto?guid=4958334016526308252" target="_blank">JQuery Image Prallax</a></strong></p>     <p>        一个通过重复和动画运动产生立体错觉的插件。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/f7eb04fb374accaf00ed411f59043ad1.jpg" width="450" height="263" /></p>     <p>        <strong>9、<a href="/misc/goto?guid=4958327964998483253" target="_blank">Stellar.js</a></strong></p>     <p>        一个为任何滚动元素提供视差滚动效果的 JQuery 插件。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/13b7cd254f9877de7f8db6b23bca4273.jpg" width="450" height="225" /></p>     <p>        <strong>10、<a href="/misc/goto?guid=4958331325063899529" target="_blank">Curtain.js</a></strong></p>     <p>        允许你嵌入一个类似于幕布升起的效果到你的网页中。</p>     <p style="text-align:center;"><img alt="10个关于视差滚动效果的教程和插件" src="https://simg.open-open.com/show/4321b5adab068d1b4bc9652baad91b9d.jpg" width="450" height="225" /></p>     <p>        英文原文：<a href="/misc/goto?guid=4958334018785335936" target="_blank">10 Useful Tutorials And Plugins for creating Parallax and scrolling effects.</a></p>     <div id="come_from">      来自:      <a id="link_source2" href="/misc/goto?guid=4958334019570465156" target="_blank">www.iteye.com</a>     </div>    </div>