错层

编程入门行业动态更新时间:2024-10-09 17:20:13

错层

其实就是上篇的Parallax

其中比较传统的一种方式，鼠标滚动的时候，不同的元素向着不同的方向用不同的速度来运动。

这样会产生一种错落有致的视觉效果，当然如果做得有河蟹感的话。。

今天分析了一个简单但是我觉得做得很好的网站，js方面也是我喜欢的风格。

HTML结构采用nav section footer的三段式，

section分出两个div，一个是主体画面的侧导航，一个是主体div。

主体div旁边还有一个aside，id为secondary_content，不过这和我所关心的动画效果无关。

主体div下分5个section 为主体内容。

首先抛开js不看，css要做到基本的遮罩以及浮动元件的定位。

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> </title><link rel="stylesheet" type="text/css" media="screen" href="reset.css"><link rel="stylesheet" type="text/css" media="screen" href="global.css"><style type="text/css" media="screen">#case_studies #cs_nyu-stern {background-image: url(images/NYU_Background1.jpg);}#case_studies #cs_nyu-stern .contentWrapper {background-image: url(images/Stern_Casestudy_logo.png);}#case_studies #cs_nyu-stern .abstract {margin-left: 10px;}#case_studies #cs_cq_roll_call {background-image: url(images/cs_0002_2.jpg);}#case_studies #cs_cq_roll_call .contentWrapper {background-image: url(images/cs_0002_logo_2.png);}#case_studies #cs_cq_roll_call .abstract {margin-left: 370px;}#case_studies #cs_human-rights-watch {background-image: url(images/Sullivan_FG_00_Bkgd_HRW_1.jpg);}#case_studies #cs_human-rights-watch .contentWrapper {background-image: url(images/Sullivan_FG_00_Banner_HRW_NewLogo3.png);}#case_studies #cs_human-rights-watch .abstract {margin-left: 50px;}#case_studies #cs_discover-ready {background-image: url(images/cs_0004_2.jpg);}#case_studies #cs_discover-ready .contentWrapper {background-image: url(images/cs_0004_logo_2.png);}#case_studies #cs_discover-ready .abstract {margin-left: 240px;}#case_studies #cs_schwab {background-image: url(images/Schwab_Home_artwork.jpg);}#case_studies #cs_schwab .contentWrapper {background-image: url(images/Schwab_Home_logo21.png);}#case_studies #cs_schwab .abstract {margin-left: 340px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.plugins.js"></script><script type="text/javascript" src="main.js"></script>
</head><body class="home"><header class="global"><div class="contentWrapper"><h1 id="siteHeader"><a href="Sullivan NYC   Home.html">Sullivan</a></h1><nav class="global"><ul><li><a href="/">Work</a></li><li><a href="/">Services</a></li><li><a href="/">Clients</a></li><li><a href="/">People</a></li><li><a href="/">Careers</a></li><li><a href="/">Contact</a></li><li><a href="/" target="_blank">Ideas</a></li><li><a href="/" target="_blank" class="login">Client Login</a></li></ul></nav></div></header><!-- /header End --><section id="page"><!-- cs_nav是右边的浮动导航--><div id="cs_nav" style="margin-top: 0px; position: fixed;"><ul><li class="case" style="display: list-item;"><a href="">Case Study Title</a></li><li class="case" style="display: list-item;"><a href="">Case Study Title</a></li><li class="case" style="display: list-item;"><a href="">Case Study Title</a></li><li class="case current" style="display: list-item;"><a href="">Case Study Title</a></li><li class="case" style="display: list-item;"><a href="">Case Study Title</a></li></ul></div><div id="case_studies" style="height: 1915px;"><!-- 内有5个section 即主体部分 --><section id="cs_nyu-stern" style="height: 383px; display: block; width: 100%; background-position: 50% -377px;"><!-- js控制的默认样式直接写在这里了 --><div class="contentWrapper innerScroll" style="height: 383px; background-position: 50% -207px;"><div class="abstract" style="margin-top: 291.5px;"><header><h2>transform information<strong><em class="sc">into</em>inspiration</strong></h2></header><div class="body"><p>We transformed the typical B-school orientation into an experience that challenged expectations about the program. And business.</p><a href="/" class="more">Learn More</a></div></div></div></section><section id="cs_cq_roll_call" style="height: 383px; display: block; width: 100%; background-position: 50% -336px;"><div class="contentWrapper innerScroll" style="height: 383px; background-position: 50% -248px;"><div class="abstract" style="margin-top: 291.5px;"><header><h2>put structure<em class="sc">to</em><strong>vision</strong></h2></header><div class="body"><p>To unite the most powerful names in political news, we had to transform the way our nation's biggest influencers stay informed.</p><a href="/" class="more">Learn More</a></div></div></div></section><section id="cs_human-rights-watch" style="height: 383px; display: block; width: 100%; background-position: 50% -294px;"><div class="contentWrapper innerScroll" style="height: 383px; background-position: 50% -289px;"><div class="abstract" style="margin-top: 291.5px;"><header><h2>turn the complex&nbsp;<em class="sc">into</em>&nbsp;<strong>the compelling</strong></h2></header><div class="body"><p>We created a communications platform that immediately connected the value of HRW's complex work to donors.&nbsp;</p><a href="/" class="more">Learn More</a></div></div></div></section><section id="cs_discover-ready" style="height: 383px; display: block; width: 100%; background-position: 50% -253px;"><div class="contentWrapper innerScroll" style="height: 383px; background-position: 50% -331px;"><div class="abstract" style="margin-top: 291.5px;"><header><h2>breathe life<em class="sc">into</em><strong>business</strong></h2></header><div class="body"><p>A professional services firm that caters to large corporations differentiated themselves by talking to people like people.</p><a href="/" class="more">Learn More</a></div></div></div></section><section id="cs_schwab" style="height: 383px; display: block; width: 100%; background-position: 50% -212px;"><div class="contentWrapper innerScroll" style="height: 383px; background-position: 50% -372px;"><div class="abstract" style="margin-top: 291.5px;"><header><h2>convert decisions<em class="sc">&nbsp;into</em><strong>action</strong></h2></header><div class="body"><p>Convincing financial advisors to go independent is just the beginning. Showing them how to get there takes a plan.</p><a href="/" class="more">Learn More</a></div></div></div></section></div><!-- /#case_studies --><aside id="secondary_content"><section id="recent_content" class="clear" style="display: block;"><div class="contentWrapper clear"><section id="twitter_feed"><header class="local_header"><span class="ico"></span><a href="" class="more">Follow Us</a></header><div class="body"><ul><li>Less is truly more, say the makers of <a class="user" href="/@MinimalismFilm">@MinimalismFilm</a>, a documentary about the important things <a href="=%23design">#design</a>  <a href="=%23life">#life</a>  <a href="">;/a><span class="date">05:03AM Jun 26, 2014</span></li><li class="even">Apple's always been on the leading edge of <a href="=%23design">#design</a>, but slow to "respond". That's about to change via <a class="user" href="/@alistapart">@alistapart</a>  <a href="">;/a><span class="date">09:13PM Jun 25, 2014</span></li></ul></div></section><!--/#twitter_feed --><section id="news_feed"><header class="local_header"><h2>In the News</h2></header><div class="body"><ul class="grid list"><li><span class="date">Posted on: Jun 24, 2014</span><h3>Barbara Apple Sullivan discusses Sullivan’s evolution in HuffPo’s “Women in Business Q&amp;A.”</h3><a href=".html" class="more" target="_blank">Read More</a><cite class="byline">via:<span>The Huffington Post</span></cite></li><li><span class="date">Posted on: Apr 08, 2014</span><h3>Barbara Apple Sullivan calls B.S. on the distinction between B2B and B2C marketing strategies.</h3><a href="/" class="more" target="_blank">Read More</a><cite class="byline">via:<span>AdAge</span></cite></li><li><span class="date">Posted on: Feb 27, 2014</span><h3>Partner Nicole Ferry shows how financial services firms can still build brands that work.</h3><a href="/" class="more" target="_blank">Read More</a><cite class="byline">via:<span>The Economist</span></cite></li><li><span class="date">Posted on: Jan 29, 2014</span><h3>Partner John Paolini discusses whether an unwieldy name will doom Obama’s myRA plan.</h3><a href="" class="more" target="_blank">Read More</a><cite class="byline">via:<span>The Wall Street Journal</span></cite></li></ul><a href="" class="all_news">view all news</a></div></section><!-- /#news_feed --></div></section><!-- /#recent_content --></aside><!-- /#white_papers --></section><!-- /#page --><footer class="global" style="display: block;"><div class="contentWrapper"><div class="colWrap clear"><div class="clear col two"><h4>Locations</h4><div class="col"><h5>New York</h5><address><span class="street-address">450 West 14th Street, 12th Floor</span><br><span class="region">New York</span>,<abbr class="locality" title="New York">NY</abbr><span class="postal-code">10014</span></address><ul><li><abbr title="Phone">p</abbr>.<span class="tel">212 888 2881</span></li><li><abbr title="Fax">f</abbr>.<span class="tel">212 888 2766</span></li><li><abbr title="Email">e</abbr>. <a class="email" href="mailto:info@sullivannyc">info@sullivannyc</a></li></ul></div><div class="col end"><h5>Washington D.C.</h5><address><span class="street-address">1806 24th Street NW</span><br><span class="region">Washington</span>,<abbr class="locality" title="New York">DC</abbr><span class="postal-code">20008</span></address><ul><li><abbr title="Phone">p</abbr>.<span class="tel">202 667 2770</span></li><li><abbr title="Fax">f</abbr>.<span class="tel">202 667 2771</span></li></ul></div></div><div id="social" class="clear col two end"><h4>Follow Us</h4><ul class="clear social_links"><li><a href="" class="li">LinkedIn</a></li><li><a href="!/sullivannyc" class="tw">Twitter</a></li><li><a href="" class="fb">Facebook</a></li><li><a href="" class="rss">RSS</a></li><li><a href="" class="mailing_list">Subscribe</a></li></ul></div></div><div id="copyright"><p>Copyright 2014 Sullivan &amp; Company</p><a href="/" target="_blank" class="login">Client Login</a></div></div><div style="display:none"><div id="mailing_list"><div class="header"><h2 class="blockHeader">subscribe to our mailing list</h2></div><form action="/" method="post" id="subForm" class="clear"><p>Sign up for Sullivan news and updates.</p><div><label for="name">Name</label><input type="text" name="cm-name" id="name" class="text"></div><div><label for="cldidu-cldidu">Email</label><input type="text" name="cm-cldidu-cldidu" id="cldidu-cldidu" class="text"></div><div><input type="hidden" name="cm-f-nhkok" id="SubscribedFrom" value="/"><input class="button" name="commit" type="submit" value="Sign up"></div></form></div></div></footer></body></html>

Sullivan_NYC Home_files

传统模式的parallax之所以简单，就是基本上他只要控制两种层级元素的运动速度和方向，就能获得很好的效果，

而css已经可以完成所有运动的参照速度，鼠标滚动产生的原始速度，以及自然的滚动方向。

如果这时候再用js去控制这个原始画面上z-index高于背景的文字或者图片向着页面行进（上或者下）方向运动的话，

比如速度是原始速度的十分之一的时候，效果已经就很动人了。

/** Sullivan Agency Website* Global Style Sheet* Author: P. R. May
*//*** Typography*
*/::selection {background: #fff200;color: #222;
}
::-moz-selection {background: #fff200;color: #222;
}body {-webkit-font-smoothing: subpixel-antialiased;
}
/* Serif */
body, button, textarea, input {color: #3d3d3d;font: 14px/22px "Georgia", Times, "Times New Roman", serif;
}a {color: #ED1C24;text-decoration: none;
}
a.more {background: url(images/arrowIco.png) no-repeat 100% 0;color: #fff200;display: block;float: left;font-size: 10px;height: 9px;letter-spacing: 1px;line-height: 9px;padding: 0 15px 0 0;text-decoration: none;text-transform: uppercase;
}
a.more:hover {text-decoration: underline;
}h1, h2, h3, h4, h5, h6 {
/*  color: #ED1C24;*/font-style: italic;font-weight: normal;
}h2 {font-size: 32px;line-height: 36px;
}h2.blockHeader,
h3.blockHeader {background: url(images/yellowStripe.png);color: #3d3d3d;font-size: 18px;height: 50px;line-height: 50px;text-align: center;
}/*** Global Elements*
*/
html, body {height: 100%;
}
body {background: #FFF url(images/whiteStripe.png) fixed;width: 100%!important;
}
body.home {background: #272727 url(images/grayStripe.png) fixed;
}
body.interior {background: #272727 url(images/grayStripe.png) fixed;
}
.contentWrapper,
.colWrap {width: 960px;
}
.contentWrapper {margin: 0 auto;position: relative;top: 0;
}#pseudoBg {background-attachment: fixed;background-position: 50% 50%;background-repeat: no-repeat;height: 100%;left: 0;overflow: hidden;position: fixed;top: 0;width: 100%;z-index: 0;
}
#pseudoBg.left {background-position: 0 50%;
}/* Header */
header.global {background: #111 url(images/headerGrad.png) repeat-x 0 0;height: 60px;position: fixed;width: 100%;z-index: 100;
}
#siteHeader {float: left;
}
#siteHeader a {background: url(images/logo.png) no-repeat 0 50%;display: block;height: 60px;text-indent: -9999px;width: 122px;
}nav.global {float: right;font-style: italic;text-shadow: 0 1px 5px #000;
}
nav.global ul {border-right: 1px solid rgba(0, 0, 0, 0.4);height: 60px;margin: 0;
}
nav.global li {float: left;
}
nav.global a {border-left: 1px solid rgba(0, 0, 0, 0.4);border-right: 1px solid rgba(255, 255, 255, 0.07);color: #FFF;display: block;height: 60px;line-height: 60px;padding: 0 22px;text-decoration: none;-webkit-transition: background-color .15s linear;-moz-transition: background-color .15s linear;transition: background-color .15s linear;
}
nav.global a:hover,
nav.global a:active,
nav.global a.current {color: #fff200;
}
nav.global a:hover {background: rgba(255, 255, 255, 0.05);
}
nav.global a:active {background-color: #373737;-webkit-box-shadow: inset 0 1px 4px #000;-moz-box-shadow: inset 0 1px 4px #000;-o-box-shadow: inset 0 1px 4px #000;box-shadow: inset 0 1px 4px #000;
}
nav.global a.home {background: url(images/homeIco.png) no-repeat 0 -60px;border-left: none;padding-left: 0;text-indent: -9999px;width: 18px;
}
nav.global a.home:hover,
nav.global a.home.current {background-position: 0 0;
}
nav.global a.home:active {-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;box-shadow: none;
}
nav.global a.login {background: url(images/lockIco.png) no-repeat 17px -60px;padding: 0 24px 0 36px;
}
nav.global a.login:hover {background-color: rgba(255, 255, 255, 0.05);background-position: 17px 0;
}/* Page */
section#page {padding: 60px 0 0 0;position: relative;min-height: 600px;width: 100%;z-index: 2;
}
.interior.alt section#page {margin: 0 auto;width: 100%;
}
#secondary_content {background: #272727 url(images/grayStripe.png);border-top: 5px solid rgba(255, 255, 255, 0.2);
}/* Footer */
footer.global {background: #222 url(images/blackStripe.png);border-top: 1px solid rgba(255, 255, 255, 0.05);clear: both;color: #A7A7A7;height: 479px;padding: 40px 0 0 0;position: relative;z-index: 2;
}footer.global .col {float: left;margin-bottom: 10px;width: 230px;
}
footer.global .col.two {width: 470px;
}
footer.global .col.end {float: right;
}
footer.global h4,
footer.global h5 {color: #fff200;font-size: 14px;
}
footer.global h4 {border-bottom: 1px solid rgba(255, 255, 255, 0.075);color: #fff200;margin: 0 0 20px 0;padding: 0 0 19px 0;
}footer.global address,
footer.global ul {display: block;margin-bottom: 5px;
}
footer.global  a {color: #fff200;text-decoration: underline;
}
footer.global  a.map {background: url(images/arrowIco.png) no-repeat 0 2px;font-size: 10px;letter-spacing: 1px;padding: 0 0 0 18px;text-transform: uppercase;
}#social ul {margin: 0;padding: 0;
}
#social li {padding: 0;float: left;margin:  0 0 10px 0;width: 235px;
}
.social_links a {background: url(images/socialIco.png) no-repeat 0 0;color: #A7A7A7;display: block;font-size: 14px;font-style: italic;height: 26px;line-height: 26px;padding: 0 0 0 35px;text-decoration: none;
}#copyright {border-top: 1px solid rgba(255, 255, 255, 0.075);clear:both;padding: 20px 0 0 0;
}
#copyright .login {background: url(images/arrowIco.png) no-repeat 100% 2px;font-size: 10px;letter-spacing: 1px;padding: 0 18px 0 0;text-transform: uppercase;
}
#copyright p {color: #666;float: right;font-family: "Arial" sans-serif;font-size: 10px;
}/*** Home Page*
*//* Intro Animation Styles */
.home #message, .home #case_studies section, .home footer.global, .home #recent_content {display: none;
}#btb_ribbon {position: absolute;right: -4px;top: -4px;
}/* Case Studies */
#case_studies {margin-top: -60px;overflow: hidden;position: relative;z-index: 10;
}
#case_studies section,
#case_studies section .contentWrapper {background-attachment: fixed;background-position: 50% 0;background-repeat: no-repeat;
}
#case_studies section,
#case_studies section .contentWrapper {overflow: hidden;position: relative;
}
#case_studies section {
/*  border-bottom: 5px solid red;*/
/*  -webkit-background-size: cover;*/
}
#case_studies section.lock_bg,
#case_studies section.lock_bg .contentWrapper {background-attachment: fixed;background-position: 50% 0;
}
#case_studies .abstract {font-style: italic;position: absolute;
}
#case_studies header {background: #fff200;float: left;padding: 13px 20px 10px 20px;position: relative;z-index: 25;-webkit-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);-o-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
}
#case_studies header h2 {color: #3d3d3d;font-size: 22px;
}
#case_studies header h2 em {color: #9D9506;font-size: 16px;text-transform: uppercase;
}
#case_studies header h2 strong {color: #ED1C24;font-weight: normal;
}
#case_studies .body {background: #FFF;border: 1px solid #FFF;clear: both;height: 80px;padding: 0 20px 0 20px;position: relative;width: 498px;z-index: 50;-webkit-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);-o-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
}
#case_studies .body p {margin: 0;padding: 18px 10px 0 0;width: 430px;
}
#case_studies .body .more {background: url(images/moreIco.png) no-repeat 0 0;display: block;height: 80px;padding: 0!important;position: absolute;right: 0;text-indent: -9999px;top: 0;width: 80px;
}
#case_studies .body .more:hover {background-position: 0 -80px;
}/* Case Studies Nav (added via sullivan.js) */
#cs_nav {position: fixed;right: 30px;top: 220px;width: 25px;z-index: 30;
}
#cs_nav ul {margin: 0;
}#cs_nav li {display: none;margin-bottom: 10px;padding: 0 0 0 5px;
}
#cs_nav li a {background: rgb(255, 255, 255);background: rgba(255, 255, 255, 0.75);display: block;height: 20px;text-indent: -9999px;width: 20px;
/*  -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;  */-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);-o-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
#cs_nav li a:hover {background: #FFF;border: 2px solid #fff200;height: 16px;width: 16px;
}
#cs_nav li:hover,
#cs_nav li.current {background: url(images/cs_nav_tick.png) no-repeat 0 50%;
}
#cs_nav li.current a {background: #fff200;
}/* White Papers */
#white_papers {background: #111;padding: 40px 0 20px 0;
}
#white_papers .contentWrapper {overflow: hidden;position: relative;
}
#white_papers .local_header {background: url(images/car_stripe_horz.png) repeat-x 0 100%;margin-bottom: 20px;
}
#white_papers .local_header a.more {margin-top: 25px;
}
#white_papers .local_header h2 {color: #fff200;font-size: 24px
}
#white_papers .local_header p {color: #666;float: right;font-size: 12px;font-style: italic;height: 48px;line-height: 61px;
}
#white_papers .carousel {padding: 0 0 30px 0;position: relative;
}
#white_papers .carousel .items {background: url(images/car_stripe_outer.png) repeat-y 50% 0;height: 160px;margin: 0 auto 0 auto;width: 800px;
}
#white_papers .carousel .page {background: url(images/car_stripe_inner.png) repeat-y 50% 0;
}
#white_papers .carousel .item {font-size: 26px;height: 150px;line-height: 32px;padding: 10px;width: 380px;
}
#white_papers .carousel .item a:hover {color: #fff200;
}
#white_papers .carousel .item img {float: left;
}
#white_papers .carousel .nav,
#white_papers .carousel .nav ul {height: 10px;width: 885px;
}
#white_papers .carousel .nav {left: 35px;position: absolute;top: 140px;z-index: 20;
}
#white_papers .carousel .nav a {background: url(images/arrowsSmallYellow.png) no-repeat 0 0;display: block;height: 10px;text-indent: -9999px;width: 13px;
}
#white_papers .carousel .nav .prev {float: left;
}
#white_papers .carousel .nav .prev a {background-position: 0 0;
}
#white_papers .carousel .nav .prev a:hover {background-position: 0 -10px;
}
#white_papers .carousel .nav .next {float: right;
}
#white_papers .carousel .nav .next a {background-position: -13px 0;
}
#white_papers .carousel .nav .next a:hover {background-position: -13px -10px;
}

global.css

虽然reset是一个单独的css文件，但从css的书写格式来看显然出自某种预处理器之手。

右侧一串圆点或者方块的锚点，href到指定id，显然它的定位只要fixed就可以了。

主体作为wrapper的那个大section设宽度100％，html行内有固定高度，position：relative，z－index比较低，min－height什么的也没有什么特别。

内部五个section都是宽度100％，设了固定高度，block，在html内直接行内样式设定了原始的背景定位，例如background-position: 50% -253px;。

主体的大图都是五个section标签的背景图，为了让这些图片在“适当的时候”出现在主视区（说这么多废话是因为以前我没有意识到，不是让画面移动进来，而是它一直就在那儿）五大section将放弃背景初始的scroll属性，改为 background-attachment: fixed;

这样明显的，布局的效果就有别于一般的流水账以及一筒拖了。

然后js肯定会去改变背景的position，已经那些其他元素的位置。

整站定义了一个叫Suli的对象，然后在这个对象里面做其他功能，

JavaScript 中并没有真正的类，但JavaScript 中有构造函数和new 运算符。构造函数用来
给实例对象初始化属性和值。任何JavaScript 函数都可以用做构造函数，构造函数必须使用new 运算符作为前缀来创建新的实例。
用new的，即通过new运算符调用构造函数Function来创建函数
不用new的，只是调用函数把返回值赋给变量。
var alice = new Me('alice', 18, 'Coder');
new 运算符改变了函数的执行上下文，同时改变了return 语句的行为。实际上，使用new后这个函数只会返回undefined，并且执行上下文是window（全局）对象，无意间创建了3个全局变量name,age,job。调用构造函数时不要丢掉new 关键字。
当使用new 关键字来调用构造函数时，执行上下文从全局对象（window）变成一个空的上下文，这个上下文代表了新生成的实例。因此，this 关键字指向当前创建的实例。尽管理解起来有些绕，实际上其他语言内置类机制的实现也是如此。
默认情况下，如果你的构造函数中没有返回任何内容，就会返回this——当前的上下文。要不然就返回任意非原始类型的值.

实例化

这些class methods在需要的情况下被new实例化即执行。

ParallaxScroller方法就在判断不是ipad以后被实例化了。

var Suli = Suli || {};
...
...
...Suli.ParallaxScroller = function (selector, nav, center, imageHeight) {this.selector = selector;this.offsets = [];this.viewport = window;this.nav = nav || false;this.center = center || false;this.imageHeight = imageHeight || 0;this.curIndex = 0;var self = this,$self = $(self.selector),$viewport = Suli.jQ.viewport,$nav,$navItem,_setOffsets = function () {for (var i = 0, len = $self.length; i < len; i++) {var offset = $self.eq(i).offset().top;self.offsets.push(offset);}},_onScroll = function () {var bgY = self.imageHeight,scrollTop = $viewport.scrollTop(),pageY = $self.height(),onCenter = Math.round(((pageY - bgY) + 1) / 2);for (var i = 0, len = $self.length; i < len; i++) {var $target = $self.eq(i),$inner = $target.find('.innerScroll'),offset = $target.offset().top,bgTop = Math.round(scrollTop - offset),bgLeft = (self.center) ? '50%' : '0';// Background Position
$target.css({'backgroundPosition' : bgLeft + ' ' + (Math.round(bgTop * -0.1) + onCenter) + 'px'});$inner.css({'backgroundPosition' : bgLeft + ' ' + (Math.round(bgTop * 0.1) + onCenter) + 'px'});//  Navigation Highlight// (only runs if instance[nav] === true)if (self.nav && (scrollTop >= $target.offset().top - 500)) {if ($navItem) {if ( ! $navItem.eq(i).hasClass('current')) {if(scrollTop > 0) {_toggleNav(i);}}}}}// Navigation Position// (only runs if instance[nav] === true)if (self.nav && $navItem) {var bottom = $(self.selector).eq($self.length - 1).offset().top;if ((bottom > 0) && scrollTop >= bottom) {// If we are at the bottom,// of document, nav should scroll up
            $nav.css({'marginTop' : Math.round(api.getViewport().height * ($self.length - 1)),'position' : 'absolute'});} else {// In the middle,// Nav is "fixed"
            $nav.css({'marginTop' : 0,'position' : 'fixed'});}}},_sizeSection = function () {_onScroll();$self.height(api.getViewport().height).find('.innerScroll').height(api.getViewport().height).end().parent().height(api.getViewport().height * $self.length).end().find('.innerScroll .abstract').css({'marginTop' : (api.getViewport().height / 2) + 100});},_template = {nav : function () {var html = '';html += '<div id="cs_nav">';html += '<ul>';for (var i = 0, len = $self.length; i < len; i++) {var anchor = $('.innerScroll:eq('+ i +')').parent().attr('id');html += (i === 0) ? '<li class="case current">' : '<li class="case">';html += '<a href="#' + anchor +'">Case Study Title</a>';html += '</li>';}html += '</ul>';html += '</div>';return html;}},_addNav = function () {$self.parent().before(_template.nav);$nav = $('#cs_nav'),$navItem = $nav.find('li');$navItem.bind('click', api.move);},_toggleNav = function (index) {if ($nav) {self.curIndex = index;$navItem.eq(index).addClass('current').siblings().removeClass('current');}},api = {init : function () {_onScroll();if ($self.length > 1) {_sizeSection();_setOffsets();if (self.nav) {_addNav();}// for (var i = 0; i < $self.length; i++) {//   var zBase = ($self.length - i);//   $self.eq(i).css(($self.length - i));// }
$viewport.bind('resize', _sizeSection);}$viewport.scroll(_onScroll);return this;},getCurIndex : function () {return self.curIndex;},getLen : function () {return $self.length;},move : function (index) {var dur = 800,next = (index.handleObj) ? $(this).index() : index,offset = $self.eq(next).offset().top;if (self.curIndex !== next) {self.curIndex = next;Suli.utils.stopWheel(dur);Suli.utils.reBind($navItem, 'click', api.move, dur);$('html, body').stop().animate({'scrollTop' : offset}, dur, 'easeOutExpo');}return false;},getViewport : function () {return {height : $viewport.height(),width : $viewport.width()};}};// Binds Controls, and exposes APIreturn api.init();
};

Parallax Scroller

用惯了jquery以后可能对美元符$有一点敬畏，实际上很多程序员喜欢用来定义变量名，就像我喜欢用下划线_一样

js里的标识符，只能以下划线_，美元符$，以及字母开头，不能以数字开头来定义，JavaScript 语句和 JavaScript 变量都对大小写敏感。（y 和 Y 是不同的变量）

css里面我也曾经犯过class名数字开头的错，样式怎么写都白写。。

这里用$定义的变量因为都在Suli的Namespace里面，是不会和jquery冲突的。

动起来

五个大section各自的css背景图就是所谓“背景”，

与这些背景反向运动的“前景”物品，在这里也被做成了和大背景图同等大小的png图片。

也就是大部分都是透明的，空的。。

这部分图片被作为section下一层div的背景。

然后这个div再包含文字内容的其他div，一些不作特定运动的内容。

控制错层部分的方法内设几个局部变量，大多被赋值为接收来的参数(selector, nav, center, imageHeight)

this.selector = selector;this.offsets = [];this.viewport = window;//js全局对象this.nav = nav || false;this.center = center || false;this.imageHeight = imageHeight || 0;this.curIndex = 0;var self = this,$self = $(self.selector),$viewport = Suli.jQ.viewport,$nav,$navItem,

这里的Suli.jQ.viewport，其实就是 $(window)

 Suli.jQ = {viewport : $(window),page : $('#page'),regionalHeader : $('header.regional'),regionalNav : $('nav.regional')};

this.offsets = [];数组用来存放五个section的offset().top值；

_setOffsets = function () {for (var i = 0, len = $self.length; i < len; i++) {var offset = $self.eq(i).offset().top;self.offsets.push(offset);}},

关键部位，控制五个section和每个section下.innerScroll的运动方向以及速度：

_onScroll = function () {var bgY = self.imageHeight,scrollTop = $viewport.scrollTop(),pageY = $self.height(),onCenter = Math.round(((pageY - bgY) + 1) / 2);for (var i = 0, len = $self.length; i < len; i++) {var $target = $self.eq(i),$inner = $target.find('.innerScroll'),offset = $target.offset().top,bgTop = Math.round(scrollTop - offset),bgLeft = (self.center) ? '50%' : '0';// Background Position$target.css({'backgroundPosition' : bgLeft + ' ' + (Math.round(bgTop * -0.1) + onCenter) + 'px'});//console.log(bgLeft,bgTop,onCenter)$inner.css({ 'backgroundPosition' : bgLeft + ' ' + (Math.round(bgTop * 0.1) + onCenter) + 'px'});

显然，他们一个是乘以0.1，一个是乘以-0.1

这里面用到另一个自定义工具集中的方法：

/*================================================Region Utils================================================
*/
Suli.utils = {stopWheel : function (dur) {Suli.jQ.viewport.bind('mousewheel', function (e) {e.preventDefault();});setTimeout(function () {Suli.jQ.viewport.unbind('mousewheel');}, dur);},reBind : function ($obj, e, fn, dur) {$obj.unbind(e, fn);if (e === 'click') { $obj.bind('click', function () { return false; })}setTimeout(function () {$obj.bind(e, fn);}, dur);}
};

js的核心部分就到此结束了，可是，可是，为什么.innerScroll和section的运动并没有被分开呢？

是因为.innerScroll的样式应该也是要：

.innerScroll {background-attachment: fixed;background-position: 50% 0;background-repeat: no-repeat;}

否则 backgroundPosition 怎么会起作用呢！

学习这个案例对我的js结构有很大提携，P. R. May先生把整个主js文件的结构规划得很清晰。

UserAgent被收纳在device对象,

Suli.device = {iPad : navigator.userAgent.match(/iPad/i) != null
};

Ajax的HTML写入被收纳在Suli.tmpl = {},

对推特用户的登录管理,

自定义工具集Suli.utils = {},

视动差构造函数Suli.ParallaxScroller = function (selector, nav, center, imageHeight) {},

响应式头部构造函数Suli.DynamicHeader = function (selector, scroll) {},

轮播图构造函数Suli.SlideShow = function ($obj, data) {},

动态分类显示Suli.Filter = function ($grid, $nav, data) {},

列表的toogle事件Suli.ListToggle = function ($list, $nav) {},

这里他用的live来委托事件：

Suli.ListToggle = function ($list, $nav) {this.list = $list;this.nav = $nav;var self = this,api = {init : function () {self.nav.live('click', api.toggle);},toggle : function () {if ( ! $(this).parent().hasClass('current')) {self.list.toggleClass('list');$(this).parent().addClass('current').siblings().removeClass('current');}// Size Bg if Neededif ($('#pseudoBg').length) {$('#pseudoBg').height(Suli.jQ.page.outerHeight());}return false;}};return api.init();
};

也是分类显示（目测）Suli.GridViewer = function (data, options, selectors) },

伪背景（大概是附加上去遮住原来的）Suli.PseudoBg = function(img, center, onCenter){},

走马灯效果构造函数Suli.Carousel = function (data, pageLen, tmpl, selectors){},

翻页功能构造函数Suli.ScrollPager = function (data, selectors, options) {},

总初始（我喜欢写在最前面）Suli.init = function (region) {},

首页下属有好几个效果以及首页单独的初始化：

Suli.home = {};

Suli.home.showLatest = function () {},

Suli.home.introAnim = function () {},

Suli.home.iPadHomePage = function (selector) {},

Suli.home.init = function () {},

页面Case Study：