我想在我的网页上使用paralax滚动，经过一些搜索，我找到了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>
任何建议在滚动时让滚动条按钮移动都会非常感激。