您的位置:首页 > Web前端 > CSS

全屏滚动插件fullpage.js的回调函数,css3动画

2016-12-29 00:00 281 查看
<script src="resources/js/jquery-ui-1.10.3.min.js"></script>
<script src="resources/js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
var deleteLog = false;
$(document).ready(function() {
$('#section1').find('h1').addClass('turnDownTransform');
$('.site-header').fadeIn();
$('.site-header-spacebg').hide();
$('#fullpage').fullpage({
scrollingSpeed: 300,
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage','5thpage','lastPage'],
navigation: true,
afterLoad: function(anchorLink, index){
if(index == 1){
$('.site-header-spacebg').hide();
$('.site-header').slideDown();
$('#section1').find('.middle-logo').delay(3000).addClass('scaleLogoTransform');
$('#section1').find('h1').addClass('turnDownTransform');
$('#section1').find('h3').addClass('lessUpTransform');
$('#section1').find('.page1-bg').addClass('scaleBgTransform');
}
if(index == 2){
$('.site-header-spacebg').show();
$('.site-header-spacebg').hover(function(){
$('.site-header').stop().slideDown();
},function(){
$('.site-header').stop().slideUp();
});
$('#section2').find('h1').addClass('turnDownTransform');
$('#section2').find('h3').addClass('lessUpTransform');
$('#section2').find('.icon-group').addClass('bottomTransform');
}
},
onLeave: function(index, direction){
if(index == 1){
$('.site-header').slideUp();
$('#section1').find('.middle-logo').removeClass('scaleLogoTransform');
$('#section1').find('h1').removeClass('turnDownTransform');
$('#section1').find('h3').removeClass('lessUpTransform');
$('#section1').find('.page1-bg').removeClass('scaleBgTransform');
}
if(index == 2){
$('.site-header').removeClass('opacityHeader');
$('#section2').find('h1').removeClass('turnDownTransform');
$('#section2').find('h3').removeClass('lessUpTransform');
$('#section2').find('.icon-group').removeClass('bottomTransform');
}
}
});

});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息