Question

我想制作视差网站我包含了视差网站所需的必要标题。我有几张图片（仅显示四张）。我在HTML和CSS文件下面附上了代码。

<!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>
<link  rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="script/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="script/jquery.localScroll.js"></script>
<script type="text/javascript" src="script/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#nav').localScroll();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('#first').parallax("50%", 0.2);
    $('#second').parallax("20%", -1.4);
    $('#third').parallax("15%", -1.4);
    $('#fourth').parallax("5%", -1.4);
});    
</script>
</head>
<body>
<ul  id="nav">
    <li><a href="#first" title="next section"><img src="images/dot.png"></a></li>
    <li><a href="#second" title="next section"><img src="images/dot.png"></a></li>
    <li><a href="#third" title="next section"><img src="images/dot.png"></a></li>
    <li><a href="#fourth" title="next section"><img src="images/dot.png"></a></li>
</ul>
<div id="a">
    <div id="first">
       <div class="story">
       <div class="floatleft">
       This is my first div to display image.







        </div>

      </div>
   </div>
    <div id="second">
      <div class="story">
       <div class="floatleft">
       This is my second div to display image.







          </div>
      </div>
   </div>
   <div id="third">
       <div class="story">
       <div class="floatleft">
       This is my third div to display image.







        </div>
      </div>
   </div>
   <div id="fourth">
       <div class="story">
       <div class="floatleft">


       This is my fourth div to display image.

        </div>   
       </div>
   <div>
</div>
</body>
</html>


My Css code goes below

@charset "utf-8";
body{
    margin: 0;
    min-width: 980px;
    padding: 0;
}
ul{
    font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size-adjust:0.488;
    font-weight:200;
    font-style:normal;
}
.floatleft{
    float: left;    
    margin: 0 0 0 20px;
}
.story{
    margin: 0 auto;
    min-width: 980px;
    width: 980px;
}
.story .floatleft{
    padding: 100px 0 0 0;
    position: relative;
    width: 350px;   
}
#first #second #third #fourth{
    width=100%;
}
#nav{
    list-style: none;
    position: fixed;
    right: 20px;
}
#nav li{
    margin: 0 0 15px 0; 
}
#first{
    background:url('images/ac.JPG') 50% 0 no-repeat fixed;
    background-image: url('images/ac.JPG') 50% no-repeat fixed;
    border-radius: .10em
    display: block;
    color: white;
    height: 600px;
    margin: 0;
    padding: 160px 0 0 0;
}
#second{
    background:url('images/ac1.JPG') 50% 0 no-repeat fixed;
    background-image: url('images/ac1.JPG') 50% no-repeat fixed;

    display: block;
    color: white;
    height: 600px;
    margin: 0;
    padding: 160px 0 0 0;
}
#third{
    background:url('images/rc.JPG') 50% 0 no-repeat fixed;
    background-image: url('images/rc.JPG') 50% no-repeat fixed;
    display: block;
    color: white;
    height: 600px;
    margin: 0;
    padding: 160px 0 0 0;

}
#fourth{
    background: url(images/rc1.JPG) 50% 0 no-repeat fixed;
    background-image: url('images/rc1.JPG') 50% no-repeat fixed;
     background-origin: content-box;
    display: block;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;
}

任何人都可以给我任何如何使其成为垂直视差的东西。提前致谢

Answer 1

我在jsfiddle上找到了一些有用的东西（可能）（它不是我的，但却很漂亮）。你可以玩它。

Paralax picture scrolling on JSfiddle

function parallax() {
    setpos("#pb0");
    setpos("#pb1");
    setpos("#pb2", 4);
    setpos("#pb3");
    setpos("#pb4");
}



function setpos(element, factor) {
    factor = factor || 2;
    
    var offset = $(element).offset();
    var w = $(window);
    
    var posx = (offset.left - w.scrollLeft()) / factor;
    var posy = (offset.top - w.scrollTop()) / factor;
    
    $(element).css('background-position', '50% '+posy+'px');
    
    // use this to have parralax scrolling vertical and horizontal
    //$(element).css('background-position', posx+'px '+posy+'px');
}

$(document).ready(function () {
    parallax();
}).scroll(function () {
    parallax();
});

body{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.textbox {
    position: relative;
    height: auto;
    
    background: white;
    padding: 50px;
    margin-top: -1px;
    margin-bottom: -1px;
    
    z-index: 99;
    box-shadow: 0 0 18px rgba( 80, 80, 80, 0.8);
}
.parallaxbox {
    position: relative;
    height: 80%;
    
    background: #444;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    
    z-index: 9;
}

a, a:visited{
    color: blue;
    text-decoration: none;
}
a:hover{
    text-decoration:underline;
}

<div class="textbox">I'm a text box.</div>

<div class="parallaxbox" id="pb0" style="background-image: url('https://farm8.staticflickr.com/7177/14025543345_9e3a1ba6f5_b.jpg');"></div>

<div class="textbox">I'm a text box.</div>

<div class="parallaxbox" id="pb1" style="background-image: url('https://farm3.staticflickr.com/2850/13713022943_77f7dfc9f3_b.jpg');"></div>

<div class="parallaxbox" id="pb2" style="background-image: url('https://farm8.staticflickr.com/7292/12274143873_2c27de94e3_b.jpg');"></div>

<div class="parallaxbox" id="pb3" style="background-image: url('https://farm6.staticflickr.com/5053/14022377261_e90e0eac5c_b.jpg');"></div>

<div class="textbox">Pictures from <a target="_blank" href="https://www.flickr.com/photos/116207237@N03/">Mayaweed</a> on Flickr.</div>

<div class="parallaxbox" id="pb4" style="background-image: url('https://farm4.staticflickr.com/3763/12273895274_9347eb5f1a_b.jpg');"></div>

<div class="textbox">I'm a the last text box.</div>

如何与网站进行视差

1 个答案: