对部分全页JS动画 [英] fullpage JS animation on section
问题描述
我是制作全页的js的网站和我有动画在我的网页埃夫里的部分，并且我希望，当我在我的部分动画播放，所以我知道有一个渲染选项，在这个插件后，但我不知道如何语法它让CSS动画播放
还有就是我的code（在这个例子中，我试图得到的第2节比赛就行，只有当我'在第2节M的动画）
VAR smallCircles = ['顶'，'右'，'底'，'左'，'顶'];\r
$（文件）。就绪（函数（）{\r
$（'＃全页）。全页（{\r
锚：['FIRSTPAGE'，'secondPage'，'3rdPage'，'4thPage'，'末页']，\r
scrollingSpeed：1000，\r
\r
\r
\r
}）;\r
}）; \r
{体\r
高度：100％;\r
保证金：0;\r
填充：0;\r
溢出：隐藏;\r
}\r
\r
.fp节{\r
位置：相对;\r
-webkit-箱尺寸：边界盒;\r
-moz-箱尺寸：边界盒;\r
箱尺寸：边界盒;\r
文本对齐：中心;\r
}\r
\r
.fp-section.fp表，.fp-slide.fp表{\r
显示：表;\r
表格的布局：固定;\r
宽度：100％;\r
}\r
.fp-的TableCell {\r
显示：表细胞;\r
垂直对齐：中间;\r
宽度：100％;\r
高度：100％;\r
}\r
\r
.fp滚动的{\r
溢出：滚动;\r
}\r
.fp-notransition {\r
-webkit-过渡：无重要;\r
！转型：无重要;\r
}\r
\r
\r
\r
＃线{\r
位置：绝对的;\r
宽度：340px;\r
的margin-top：20px的;\r
高度：4PX;\r
背景：RGBA（0,0,0,1）;\r
-moz-动画持续时间：1秒;\r
-webkit-动画持续时间：1秒;\r
-moz-动画名称：的slideIn;\r
-webkit-动画名称：的slideIn;\r
}\r
\r
@ -moz-关键帧{的slideIn\r
从{\r
保证金左：100％;\r
宽度：300％\r
}\r
\r
至 {\r
保证金左：0％;\r
宽度：600％;\r
}\r
}\r
\r
@ -webkit-关键帧{的slideIn\r
从{\r
保证金左：0％;\r
宽度：0％\r
}\r
\r
至 {\r
保证金左：0％;\r
宽度：340px;\r
}\r
} \r
＆LT;脚本SRC =http://ajax.googleapis.com/ajax /libs/jquery/1.8.3/jquery.min.js\"></script>\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js\"></script>\r
\r
\r
＆LT; DIV ID =全页＆GT;\r
\r
＆LT; DIV CLASS =部分ID =ACCUEIL＆GT;\r
＆LT; H2＆GT;＆SECTION1 LT; / H＆GT;\r
＆所述p为H.;＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =部分ID =唐＆GT;\r
＆LT; H2＆GT;第2节＆LT; / H＆GT;\r
＆LT; DIV ID =行＆GT;＆LT; / DIV＆GT;\r
\r
\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =部分ID =三＆GT;\r
\r
＆所述H 2→3＆下; / H2＆GT;\r
\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =部分ID =回收＆GT;\r
＆所述H 2→4＆下; / H2＆GT;\r
\r
＆LT; / DIV＆GT;\r
\r
\r
＆LT; / DIV＆GT;\r
\r
看看这个视频：
https://www.youtube.com/watch?v=qiCVPpI9l3M
这是理想的处理CSS动画，如果你正在寻找JavaScript或jQuery的动画，那么你应该使用的按fullPage.js提供的回调，如负荷或 onLeave ：
$（'＃全页）。全页（{
锚：['FIRSTPAGE'，'secondPage'，'thirdPage'，'fourthPage'，'末页']， 后负荷：功能（anchorLink，指数）{
VAR loadedSection = $（本）; 使用索引//
如果（指数== 3）{
警报（第3节结束装载）;
} //使用anchorLink
如果（anchorLink =='secondSlide'）{
警报（第2节结束装载）;
}
}
}）;
i' m making a fullpage Js website and i have animations in evry sections of my page, and i want that my animation play when i'm on the section, so i know have an after render option in this plugin but i dont know how to syntax it for make the css animation play there is my code ( in this example i'm trying to get the animation of the line of the section2 play only when i' m on the section2)
var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
scrollingSpeed: 1000,
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
#line{
position:absolute;
width:340px;
margin-top:20px;
height:4px;
background:rgba(0,0,0,1);
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:600%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:0%;
width:0%
}
to {
margin-left:0%;
width:340px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section " id="accueil">
<h2>section1</h2>
<p></p>
</div>
<div class="section" id="don">
<h2>section2</h2>
<div id="line"></div>
</div>
<div class="section" id="tri">
<h2>3</h2>
</div>
<div class="section" id="recycle">
<h2>4</h2>
</div>
</div>
Check out this video: https://www.youtube.com/watch?v=qiCVPpI9l3M
That's ideal to deal with CSS animations, if you are looking for javascript or jQuery animations, then you should use the callbacks provided by fullPage.js such as afterLoad or onLeave:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
//using index
if(index == 3){
alert("Section 3 ended loading");
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
这篇关于对部分全页JS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
