我想在我的网页上使用视差滚动，经过一番搜索，我找到了jarallax库。我想在我的滚动方法中使用带有滚动条效果的demo2，但是滚动条按钮不起作用。
这是我的 JavaScript：
init = function () {
var keys = { 38: -0.01, 40: 0.01 };
var drag_controller = new ControllerDrag('buttontodrag', 100, 200);
var key_controller = new ControllerKeyboard(keys, true, true);
var wheel_controller = new ControllerMousewheel(0.01, true);
var jarallax = new Jarallax([drag_controller, key_controller, wheel_controller]);
//defaults
jarallax.setDefault('h1, h2, #p1, #p2, #p3', { display: 'none' });
jarallax.setDefault('#head1, #head2, #head3, #head4, #head5, #head6, #head7 h2, h3, #p1, #p2, #p3, #p4, #p5, #p6, #p7', { opacity: '0' });
//title
jarallax.addAnimation("h1", [{ progress: "0%", opacity: "0" },
{ progress: "5%", opacity: "1" },
{ progress: "9%", opacity: "1" },
{ progress: "12%", opacity: "0" }]);
jarallax.addAnimation("h1", [{ progress: "0%", marginTop: "150px", display: "block" },
{ progress: "12%", marginTop: "160px" }]);
////slide1
//jarallax.addAnimation(".arrow", [{progress:"20%", top:"-20px"}, {progress:"50%", top:"1px"}]);
//jarallax.addAnimation(".arrow", [{progress:"20%", opacity:"0"},
// {progress:"30%", opacity:"1"},
// {progress:"40%", opacity:"1"},
// {progress:"50%", opacity:"0"}]);
jarallax.addAnimation("#head1, #p1", [{ progress: "12%", display: "block", marginTop: '0px' }, { progress: "21%", marginTop: '10px' }]);
jarallax.addAnimation("#head1, #p1", [{ progress: "14%", opacity: "0" },
{ progress: "17%", opacity: "1" },
{ progress: "19%", opacity: "1" },
{ progress: "21%", opacity: "0" }]);
////slide2
//jarallax.addAnimation(".question", [{ progress: "20%", marginLeft: "400px" }, { progress: "30%", marginLeft: "380px" }]);
//jarallax.addAnimation(".question", [{ progress: "22.5%", opacity: "0" },
// { progress: "25%", opacity: "1" },
// { progress: "27.5%", opacity: "1" },
// { progress: "30%", opacity: "0" }]);
jarallax.addAnimation("#head2, #p2", [{ progress: "24%", display: "block", marginTop: '0px' }, { progress: "34%", marginTop: "10px" }]);
jarallax.addAnimation("#head2, #p2", [{ progress: "27%", opacity: "0" },
{ progress: "29%", opacity: "1" },
{ progress: "31%", opacity: "1" },
{ progress: "34%", opacity: "0" }]);
//slide3
jarallax.addAnimation("#head3, #p3", [{ progress: "37%", display: "block", marginTop: '0px' }, { progress: "47%", marginTop: '10px' }]);
jarallax.addAnimation("#head3, #p3", [{ progress: "39%", opacity: "0" },
{ progress: "41%", opacity: "1" },
{ progress: "44%", opacity: "1" },
{ progress: "47%", opacity: "0" }]);
jarallax.addAnimation("#head4, #p4", [{ progress: "51%", display: "block", marginTop: '0px' }, { progress: "61%", marginTop: '10px' }]);
jarallax.addAnimation("#head4, #p4", [{ progress: "54%", opacity: "0" },
{ progress: "57%", opacity: "1" },
{ progress: "59%", opacity: "1" },
{ progress: "61%", opacity: "0" }]);
jarallax.addAnimation("#head5, #p5", [{ progress: "64%", display: "block", marginTop: '0px' }, { progress: "74%", marginTop: '10px' }]);
jarallax.addAnimation("#head5, #p5", [{ progress: "67%", opacity: "0" },
{ progress: "69%", opacity: "1" },
{ progress: "71%", opacity: "1" },
{ progress: "74%", opacity: "0" }]);
jarallax.addAnimation("#head6, #p6", [{ progress: "77%", display: "block", marginTop: '0px' }, { progress: "87%", marginTop: '10px' }]);
jarallax.addAnimation("#head6, #p6", [{ progress: "79%", opacity: "0" },
{ progress: "81%", opacity: "1" },
{ progress: "84%", opacity: "1" },
{ progress: "87%", opacity: "0" }]);
jarallax.addAnimation("#head7, #p7", [{ progress: "89%", display: "block", marginTop: '0px' }, { progress: "100%", marginTop: '10px' }]);
jarallax.addAnimation("#head7, #p7", [{ progress: "91%", opacity: "0" },
{ progress: "94%", opacity: "1" },
{ progress: "97%", opacity: "1" },
{ progress: "100%", opacity: "0" }]);
}
这是我的 HTML：
<script>
window.onload = init();
</script>
<div class="containers">
<div class="span7">
<%-- Add Paralax here --%>
<%-- <div class="containers" id="slide1">--%>
<div id="animation">
<h1 style="margin-top: 150px;">TimeLine</h1>
<section id="C2007">
<%--data-type="background" data-speed="10">--%>
<h3 id="head1">2007</h3>
<div class="row-fluid">
<article id="p1">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.
</article>
</div>
</section>
<%-- <div class="containers" id="slide2">--%>
<section id="C2008" style="margin-top: -100px;">
<%--data-type="background" data-speed="10">--%>
<h3 id="head2">2008</h3>
<div class="row-fluid">
<article id="p2">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.
</article>
</div>
</section>
<%--<div class="containers" id="slide3">--%>
<section id="C2009" style="margin-top: -100px;">
<%--data-type="background" data-speed="10">--%>
<h3 id="head3">2009</h3>
<div class="row-fluid">
<article id="p3">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.
</article>
</div>
</section>
<%--</div>--%>
<%--<div class="containers" id="slide4">--%>
<section id="C2010" style="margin-top: -100px;">
<%-- data-type="background" data-speed="10">--%>
<h3 id="head4">2010
</h3>
<div class="row-fluid">
<article id="p4">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.
</article>
</div>
</section>
<%--<div class="containers" id="slide5">--%>
<section id="C2011" style="margin-top: -290px;">
<%--data-type="background" data-speed="10">--%>
<h3 id="head5">2011
</h3>
<div class="row-fluid">
<article id="p5">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide.
</article>
</div>
</section>
<%--</div>--%>
<%-- <div class="containers" id="slide6">--%>
<section id="C2012" style="margin-top: -340px;">
<%--data-type="background" data-speed="10">--%>
<h3 id="head6">2012</h3>
<div class="row-fluid">
<article id="p6">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum,
the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
</article>
</div>
</section>
<%-- </div>--%>
<%--<div class="containers" id="slide7">--%>
<section id="Current" style="margin-top: -350px;">
<%-- data-type="background" data-speed="10">--%>
<h3 id="head7">Current</h3>
<div class="row-fluid">
<article id="p7">
The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum, the Department of Communications announces its commitment to digital broadcasting in South Africa. This will place it at the forefront of digital broadcasting worldwide. The Department of Communications announces its commitment to a digital broadcasting platform in South Africa. At the Commonwealth Telecommunications Organisation’s (CTO) Digital Switchover Forum,
the Department of Communications announces its commitment to digital broadcasting in South Africa.
This will place it at the forefront of digital broadcasting worldwide.The Department of Communications announces its commitment to a digital broadcasting platform in South Africa.
</article>
</div>
</section>
</div>
<div id="scrollbar">
</div>
<div id="buttontodrag" href="#">
ScrollButton
</div>
</div>
</div>
任何让滚动条按钮在滚动时移动的建议将不胜感激。