jquery - 来自 razorfish.github.io/Parallax-JS/ 在非全高 div 上的视差

Question

如何使此脚本http://razorfish.github.io/Parallax-JS/在此页面上的 .visual div 的背景图像上工作：http://bit.ly/1aWpGFr具有位置：固定以实现spotify.com 风格的视差效果？

谢谢！

该脚本将视差应用于所有“#content section”标签，并且 css 使它们的高度为 100%。但是当我尝试在自己的布局中使用它时，如果所有 div（包括白色 div）的高度相同，我只能让它工作。而且我无法让它与固定的顶栏一起使用。

我的站点代码看起来像这样，我只想将此脚本中的视差应用于 .visual div，仅此而已。我只是不知道要采取什么方法-有什么想法吗？

我的代码：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>1986 | Product design studio |</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />





</head>

<body>


<div class="header">
    <div class="logo"></div>
    <div class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </div>
</div>



<div class="visual"></div>
<div class="wrapper">
    <div class="column-left">
        <h1>E-Light&trade;</h1>
        <p class="intro">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>


<div class="visual" style="background-image:url(images/visual2.jpg)"></div>
<div class="wrapper">

    <div class="column-right">
        <h1>Methodology</h1>
        <p class="intro">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>

</div>

<!--<div class="footer-space"></div>-->

<div class="footer">
    <div class="wrapper">
        <div class="column">
            <h2>Services</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </p>
        </div>
        <div class="column">
            <h2>About</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </p>
        </div>
        <div class="column">
            <h2>Keep in touch</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </p>
        </div>
        <div class="column-last">
            <h2>Contact</h2>
            <p>
            1986
            Anders Andersen
            Vestergade 12<br />
            5000 Odense<br />
            Denmark
            </p>
        </div>
    </div>
</div>


</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end reset */



@font-face {
    font-family: 'bebas_neueregular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    font-family:Helvetica Neue, Arial, sans-serif;
    font-size:12px;
    line-height:1.6em;
    background-color:#fff;
}

h1, h2, h3, h4, h5, h6, p.intro, .navigation li a {
    font-family:"bebas_neueregular", Helvetica Neue, Arial, sans-serif;
}

h1{
    font-size:46px;
    line-height:46px;
    margin-bottom:30px;
}

h2{
    color:#fff;
    font-size:24px;
    margin-bottom:30px;
}

p{
}

p.intro{
    color:#787878;
    font-size:24px;
    line-height:1.2em;
    margin-bottom:30px;
}


.header{
    width:100%;
    position:relative;
    float:left;
    clear:both;
    margin:0px 0px -84px 0px;
    background-color: #fff;
    background-color:rgba(255,255,255,0.8);
    z-index:50;
}

    .modernizr-fallback-header{
        width:100%;
        position:relative;
        float:left;
        clear:both;
        margin:0px 0px -84px 0px;
        background-color: #fff;
        z-index:50;
    }


.logo{
    position:relative;
    left:50%;
    margin-left:-400px;
    display:block;
    width:64px;
    height:64px;
    float:left;
    background-size:contain;
    background-repeat:none;
    background-image:url(images/logo.png);
}

.navigation{
    position:relative;
    left:50%;
    width:600px;
    height:1%;
    overflow:hidden;
    text-align:right;
    margin:24px 0 16px -200px;
}

    .navigation li{
        display:inline;
        height:1%;
        overflow:hidden;
        margin-left:30px;
    }

        .navigation li a, .navigation li a:visited{
            display:inline;
            color:#000;
            font-size:24px;
            text-decoration:none;
        }

            .navigation li a:hover{
                color:#777;
                    animation: myanim 0.7s;
               -moz-animation: myanim 0.7s; /* Firefox */
            -webkit-animation: myanim 0.7s; /* Safari and Chrome */
                 -o-animation: myanim 0.7s; /* Opera */
            }

                @-webkit-keyframes myanim {
                  0%   { color:#000; }
                  100% { color:#777; }
                }
                @-moz-keyframes myanim {
                  0%   { color:#000; }
                  100% { color:#777; }
                }
                @-o-keyframes myanim {
                  0%   { color:#000; }
                  100% { color:#777; }
                }
                @keyframes myanim {
                  0%   { color:#000; }
                  100% { color:#777; }
                }

/* OLD WRAPPER          
.wrapper{
    width:100%;
    position:relative;
    float:left;
    clear:both;
    padding:30px 0px 60px 0px;
    z-index:10;
    background-color: transparent;
    background-image:url(images/whitefade-top.png), url(images/whitefade-bottom.png);
    background-repeat:repeat-x;
    background-position:top, bottom;
    margin-bottom:-160px;


}
*/


.wrapper {
    width:100%;
    position:relative;
    float:left;
    clear:both;
    padding:30px 0px 45px 0px;
    z-index:10;
    background-color: transparent;
    background-image:url(images/whitefade-top.png), url(images/white.gif), url(images/whitefade-bottom.png);

    margin-bottom:-160px;

    border-top:160px solid transparent;
    border-bottom:160px solid transparent;

    background-repeat:
        repeat-x,
        repeat,
        repeat-x;
    background-position:
        top,
        center,
        bottom;
    background-origin:
        border-box,
        padding-box,
        border-box;


    -moz-background-clip: border, padding, border;     /* Firefox 3.6 */
  -webkit-background-clip: border, padding, border;  /* Safari 4? Chrome 6? */
  background-clip: border-box, padding-box, border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

}


.visual-top{
    position:relative;
    left:0px;
    width:100%;
    height:726px;
    float:left;
    clear:both;
    z-index:1;
    margin-bottom:-160px;
    background-image:url(images/visual.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    background: url(images/visual.jpg) no-repeat center static; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

.visual{
    position:relative;
    left:0px;
    width:100%;
    height:822px;
    float:left;
    clear:both;
    z-index:1;
    margin-bottom:-160px;
    background-image:url(images/visual.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    background: url(images/visual.jpg) no-repeat center static; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

.column-left{
    width:600px;
    position:relative;
    left:50%;
    margin:-160px 0 -160px -400px;
}

.column-right{
    width:600px;
    position:relative;
    left:50%;
    margin:-160px 0 -160px -200px;
}

.column{
    width:180px;
    margin-right:20px;
    display:block;
    float:left;
    position:relative;

}

.column-last{
    width:180px;
    margin-right:0px;
    display:block;
    float:left;
    position:relative;
}

.footer{
    width:100%;
    background-color:#191919;
    height:1%;
    position:hidden;
    bottom:0px;
    float:left;
    z-index:0;
}

    .footer .wrapper{
        background-color:transparent;
        width:800px;
        left:50%;
        margin:160px 0 0 -400px;
        background:none;
        background-color:transparent;
        border:0px;
    }

    .footer p{
        color:#fff;
    }

.footer-space{
    height:200px;
    z-index:-2;
    display:block;
    float:left;
    background:#fff;
    width:100%;
    margin-bottom:160px;
}

jquery - 来自 razorfish.github.io/Parallax-JS/ 在非全高 div 上的视差

0 回答 0

Related

Reference