skrollr-maste滚动视差jquery

1、新建html文档。

3、书写css代码。html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }html, body { line-height: 1; min-height: 100%; font-family: Artial, Verdana, sans-serif; }body { background: #eeeeee; background: -web kit-linear-gradient(top, #eeeeee, #cccccc 100%); background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%); background: -o-linear-gradient(top, #eeeeee, #cccccc 100%); background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%); background: linear-gradient(top, #eeeeee, #cccccc 100%); background-attachment: fixed; }ol, ul { list-style: none; }p { margin: 1em 0; line-height: 1.1em; }q { font-style: italic; color: #333; }h1 { font-size: 2.91em; margin: 0; }h1 > small { text-align: right; display: inline-block; font-size: .71em; text-indent: 15em; color: #444; }h2 { color: inherit; font-size: 1.91em; margin: 2em 0 1em 0; }h2:first-child { margin-top: 0; }h3 { color: #333; font-size: 1.41em; margin: 1em 0; }h4 { color: #444; font-size: 1.11em; margin: 1em 0; }#progress { height: 2%; background: #444; bottom: 0; z-index: 200; }#scrollbar { position: fixed; right: 2px; height: 50px; width: 6px; background: #444; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.6); z-index: 300; border-radius: 3px; }.skrollr-desktop #scrollbar { display: none; }#bg1, #bg2, #bg3 { z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: url(images/bubbles.png) repeat 0 0; }#bg2 { z-index: 49; background-image: url(images/bubbles2.png); }#bg3 { z-index: 48; background-image: url(images/bubbles3.png); }#intro { width: 80%; left: 50%; top: 1em; margin-left: -40%; padding: 2em; background: #fff; text-align: center; border-radius: 1em; -web kit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -web kit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }#intro .arrows { font-size: 2em; color: #09f; }#transform { width: 70%; left: 50%; top: 20%; margin-left: -35%; text-align: center; font-size: 150%; .transform-origin(50%, 50%);}#properties { width: 100%; height: 100%; padding-top: 10%; text-align: center; -web kit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }#easing_wrapper { width: 100%; height: 100%; }#easing { top: 10%; width: 50%; z-index: 101; }.drop { background: #09f; font-weight: bold; padding: 1em; }#download { width: 80%; left: 10%; height: 80%; padding: 3em; border: 0 solid #222; -web kit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

5、代码整体结构。