Web ページでパララックス スクロールを使用したいのですが、検索の結果、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>
スクロール中にスクロールバーボタンを移動するためのアドバイスをいただければ幸いです。