Question

我使用skrollr作为我的视差网站的插件。我正在使用几个图像从我的css文件调用类。我想在slide-2之前加载图像并在页面向下滚动时保持固定为前景图像。如何实现固定前景图像。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title> 
<title>jQuery Parallax Plugin Demo</title>
    <link rel="stylesheet" href="ree1.css">
    <link rel="stylesheet" href="normalize.css">
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/skrollr.js"></script>
    <script type="text/javascript" src="scripts/m.js"></script>
     <script src="js/vendor/modernizr-2.7.1.min.js"></script

    </head>    
<body class="loading">
<div id="preload">
            <img src="img/R1.jpg">
            <img src="img/R2.jpg">
            <img src="img/R3.jpg">
            <img src="img/R4.jpg">
</div>
<main>

<section id="slide-1" class="homeSlide">
            <div class="bcg"
                 data-center="background-position: 50% 0px;"
                data-top-bottom="background-position: 50% -100px;"
               data-anchor-target="#slide-1"
                 >
                <div class="hsContainer" 
                   data-center="bottom: 200px; opacity: 1"
                data-top="bottom: 1200px; opacity: 0"
                data-anchor-target="#slide-1 h2" 
                     >
                    <div class="hsContent">
                       <!-- <h2>Simple parallax scrolling is...</h2>-->
                    </div>
                </div>
            </div>
 </section>
<div class="divfix"></div>
<section id="slide-2" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-2"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-center="opacity: 1"
                data-center-top="opacity: 0"
                data--100-bottom="opacity: 0;"
                data-anchor-target="#slide-2"
            >
               <!-- <h2>great for story telling websites.</h2>-->
            </div>
        </div>
    </div>
</section>
<section id="slide-3" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-3"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data--50-bottom="opacity: 0;"
                data--200-bottom="opacity: 1;"
                data-center="opacity: 1"
                data-200-top="opacity: 0"
                data-anchor-target="#slide-3 h2"
            >
                <!--<h2>Now go and create your own story</h2>-->
            </div>
        </div>
    </div>
</section>
<section id="slide-4" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-4"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-bottom-top="opacity: 0"
                data-25p-top="opacity: 0"
                data-top="opacity: 1" 
                data-anchor-target="#slide-4"
            >
               <!-- <h2>and share mine.</h2>-->
            </div>
        </div>
    </div>
</section>
/main>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="scripts/imagesloaded.js"></script>
        <script src="scripts/skrollr.js"></script>
        <script src="scripts/m.js"></script>
        <script type="text/javascript">
    // Init Skrollr
var s = skrollr.init();

// Refresh Skrollr after resizing our sections
s.refresh($('.homeSlide'));
var s = skrollr.init({
    forceHeight: false
});
    </script>
</body>
</html>

CSS

.divfix{
background-image: url('img/G.gif');
background-attachment:scroll;
position: absolute;
top: auto;
bottom: auto;}

#slide-1 .bcg {background-image:url('images/r1.jpg')}
#slide-1 .hsContent {
    bottom: 200px;
    top: auto;
}
#slide-1 h2 {
    position: fixed;
    top: 70%;
}

#slide-2 .bcg {background-image:url('images/r2.jpg')}
#slide-2 .hsContent {
    margin-left: -450px;
    bottom: 200px;
    top: auto;
}
#slide-2 h2 {
    position: fixed;
    top: 70%;
}

#slide-3 .bcg {background-image:url('images/rc.jpg')}
#slide-3 .hsContent {
    margin-left: -239px;

}
#slide-3 h2 {
    color: #f2ead6;
        background-color: rgba(0,0,0,0.6);
}

#slide-4 .bcg {background-image:url('images/rr.jpg')}
#slide-4 .hsContent {
    margin-left: -450px;
    position: fixed;
    top: 250px;
}
#slide-4 h2 {
    background: none;
    padding-left: 0;
    padding-right: 0;
}

修复前景图像不起作用

0 个答案: