5 javascript jquery plugins scroll fullpage.js
我有一个使用Fulpage.js的项目，我只想水平滚动该项目的一个部分。
所以我添加了Scrollr.js，但问题是，它不起作用。
这是我的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fullpage.min.css">
<title>Fullpage Animation</title>
<style>
body{
margin:0;
padding:0;
font-family: sans-serif;
}
.temps{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
}
.nemoone{
min-width:100%;
height:auto;
display:flex;
}
.nemoone .storyBx{
padding:100px 60px;
}
.nemoone .storyBx h2{
margin:0 0 20px;
padding:0;
font-size:48px;
}
.nemoone .storyBx p{
margin:0;
padding:0;
font-size:18px;
text-align: justify;
}
</style>
</head>
<body>
<div id="fullpage">
<section class="section s1">
<h1>Other</h1>
<div class="temps" data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<div class="nemoone">
<div class="imgBx">
<!-- <img src="img2.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img3.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img4.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="nemoone">>
<div class="imgBx">
<!-- <img src="img5.jpg"> -->
</div>
<div class="storyBx">
<h2>Horizontal Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<section class="section s2">
<h1>Another Section</h1>
</section>
</div>
<script src="./fullpage.min.js"></script>
<script src="./skrollr.js"></script>
<script>
new fullpage("#fullpage", {
autoScrolling: true,
navigation: true,
onLeave: (origin, destination, direction) => {
const section = destination.item;
const title = section.querySelector("h1");
const tl = new TimelineMax({delay: 0.5});
tl.fromTo(title, 0.5, {y: "50", opacity: 0}, {y:0, opacity:1});
if(destination.index === 1){
const description = document.querySelector(".description");
tl.fromTo(description, 0.5, {y: "50", opacity: 0}, {y:0, opacity:1})
}
}
});
skrollr.init();
</script>
</body>
</html>
所以我的问题是如何让这两个插件同时工作？有可能吗？如果是，那么如何？
我真的很感激你们的任何想法，提前致谢。
阿尔瓦罗的回答更新：
正如 Alvaro 所说，为了使用这两个插件，我必须使用：
new fullpage('#fullpage', {
scrollBar: true
});
所以当我这样做时，水平滚动有效，但现在的问题是，水平滚动和 fullpage.js 垂直滚动同时工作！
实际上，必须完成此部分的水平滚动，然后才能进行其他部分。
可以同时使用两者的唯一方法是使用 fullPage.js 和本示例scrollBar:true中的选项。
new fullpage('#fullpage', {
scrollBar: true
});
您需要一个可见的滚动条才能使用 skrollr。
但是，您也可以考虑使用fullPage.js 回调和状态类来触发动画。请参阅此处的视频教程，解释如何使用 CSS3 和全页状态类对事物进行动画处理： https://www.youtube.com/watch ?v=qiCVPpI9l3M
| 归档时间： |
|
| 查看次数： |
136 次 |
| 最近记录： |