jquery - 非フルハイト div の razorfish.github.io/Parallax-JS/ からの視差

Question

このスクリプトhttp://razorfish.github.io/Parallax-JS/をこのページの .visual div の背景画像で動作させるにはどうすればよいですか: http://bit.ly/1aWpGFr位置:fixed を達成するために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 - 非フルハイト div の razorfish.github.io/Parallax-JS/ からの視差

0 に答える 0

Related

Reference