错层
其实就是上篇的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="http://www.sullivannyc.com/work/">Work</a> </li> <li><a href="http://www.sullivannyc.com/services/">Services</a> </li> <li><a href="http://www.sullivannyc.com/clients/">Clients</a> </li> <li><a href="http://www.sullivannyc.com/people/">People</a> </li> <li><a href="http://www.sullivannyc.com/careers/">Careers</a> </li> <li><a href="http://www.sullivannyc.com/contact/">Contact</a> </li> <li><a href="http://foldmag.com/" target="_blank">Ideas</a> </li> <li><a href="http://clients.sullivannyc.com/" 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="http://www.sullivannyc.com/#cs_nyu-stern">Case Study Title</a> </li> <li class="case" style="display: list-item;"><a href="http://www.sullivannyc.com/#cs_cq_roll_call">Case Study Title</a> </li> <li class="case" style="display: list-item;"><a href="http://www.sullivannyc.com/#cs_human-rights-watch">Case Study Title</a> </li> <li class="case current" style="display: list-item;"><a href="http://www.sullivannyc.com/#cs_discover-ready">Case Study Title</a> </li> <li class="case" style="display: list-item;"><a href="http://www.sullivannyc.com/#cs_schwab">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="http://www.sullivannyc.com/casestudy/nyu-stern/" 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="http://www.sullivannyc.com/casestudy/cq_roll_call/" 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 <em class="sc">into</em> <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. </p> <a href="http://www.sullivannyc.com/casestudy/human-rights-watch/" 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="http://www.sullivannyc.com/casestudy/discover-ready/" 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"> 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="http://www.sullivannyc.com/casestudy/schwab/" 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="http://www.twitter.com/sullivannyc" class="more">Follow Us</a> </header> <div class="body"> <ul> <li>Less is truly more, say the makers of <a class="user" href="http://twitter.com/@MinimalismFilm">@MinimalismFilm</a>, a documentary about the important things <a href="http://search.twitter.com/search?q=%23design">#design</a> <a href="http://search.twitter.com/search?q=%23life">#life</a> <a href="http://t.co/zhbfSm3Cex">http://t.co/zhbfSm3Cex</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="http://search.twitter.com/search?q=%23design">#design</a>, but slow to "respond". That's about to change via <a class="user" href="http://twitter.com/@alistapart">@alistapart</a> <a href="http://t.co/oZfMRkldCA">http://t.co/oZfMRkldCA</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&A.”</h3> <a href="http://www.huffingtonpost.com/laura-dunn/women-in-business-qa-barb_b_5491387.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="http://adage.com/article/btob/i-call-b-s-b-b-b-c/292505/" 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="http://www.economistgroup.com/leanback/the-next-big-thing/financial-branding-wolf-of-wall-street/" 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="http://www.marketwatch.com/story/will-unwieldy-name-doom-obamas-myra-plan-2014-01-29" class="more" target="_blank">Read More</a> <cite class="byline">via: <span>The Wall Street Journal</span> </cite> </li> </ul> <a href="http://www.sullivannyc.com/news" 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:[email protected]">[email protected]</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="http://www.linkedin.com/company/sullivan" class="li">LinkedIn</a> </li> <li><a href="http://twitter.com/#!/sullivannyc" class="tw">Twitter</a> </li> <li><a href="http://www.facebook.com/pages/Sullivan/165770676800241" class="fb">Facebook</a> </li> <li><a href="http://www.sullivannyc.com/blog/rss" class="rss">RSS</a> </li> <li><a href="http://www.sullivannyc.com/#mailing_list" class="mailing_list">Subscribe</a> </li> </ul> </div> </div> <div id="copyright"> <p>Copyright 2014 Sullivan & Company</p> <a href="http://clients.sullivannyc.com/" 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="http://sullivan2.createsend.com/t/y/s/cldidu/" 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="http://www.sullivannyc.com/"> <input class="button" name="commit" type="submit" value="Sign up"> </div> </form> </div> </div> </footer> </body> </html>
传统模式的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; }
虽然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 API return api.init(); };
用惯了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 Needed if ($('#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：
Suli.casestudy = {};
Suli.casestudy.slideshows = [];
Suli.casestudy.init = function () {},
页面Services：
Suli.services = {};
Suli.services.init = function () {},
页面Clients：
Suli.clients = {};
Suli.clients.init = function () {},
页面People / Person：
Suli.people = {};
Suli.person = {};
Suli.people.init = function () {},
页面Careers：
Suli.careers = {};
Suli.careers.init = function () {},
。。。。略。。。。