jQuery fullpage响应式全屏滚动

所属分类：UI,媒体-布局,滚动,幻灯片和轮播图

38912 446 查看评论 (33)

分享到微信朋友圈

查看演示立即下载

插件描述：瀑布流全屏滚动，绚丽的banner切换

全屏滚动流媒体，引入，

<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script src="js/jquery.fullPage.min.js"></script>

在执行$('#index_main').fullpage({

'navigation': true,
slidesNavigation: true,
    controlArrows: false,
    continuousHorizontal: true,
    scrollingSpeed: 1000,
    showActiveTooltip: true,
    anchors: ['hero', 'one', 'two', 'three'],
    loopHorizontal: true,
    afterLoad: function(anchorLink, index) {
        if (index == 1) {
            $('header').removeClass('on');
        }
        if (index == 2) {
            $('header').addClass('on');
            $('.section2 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 3) {
            $('header').addClass('on');
            $('.section3 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 4) {
            $('header').addClass('on');
            $('.section4 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
    },
    onLeave: function(index, direction) {
    }
})

jquery垂直向上逐条滚动新闻列表

33数字华容道

相关插件-布局,滚动,幻灯片和轮播图

jQuery bootstrap响应式食品网站模板

jQuery bootstrap响应式食品网站模板，提供7款不同首页风格

布局

8700 147

jquery异步加载图片大图小图

jquery异步加载大图小图

布局

22221 278

jQuery Bootstrap个人简网站模板

jQuery Bootstrap个性化、黑色风格响应式个人简历模板

布局

20108 287

VR游戏开发公司网站响应式模板

游戏开发公司网站响应式模板

布局

24657 310

讨论这个项目（33）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

?尔 0

2020/9/12 17:37:49

Ervin 0

2020/5/8 14:16:55

壹起航-建站部设计 0

2020/3/28 11:10:53

壹起航-建站部设计 0

2020/3/26 18:09:03

斜阳下45”微笑 0

2019/9/9 13:49:30

恬恬~0

2019/9/18 17:04:30

当时没测

*动感超人爱泡面！* 0

2019/8/26 23:39:05

恬恬~1

2019/9/4 10:02:43

class为section2、section3、section4的样式都在index.css里面，新增东西居中了是因为样式里设置了text-align：center

安之若素 0

2019/7/26 14:07:35

西瓜0

2019/7/26 14:40:00

不太明白你的意思，是向下滚动一屏吗？

陈先森 0

2019/7/26 11:36:50

西瓜1

2019/7/26 14:37:46

index.css中修改

/*banner背景图片动画*/
    @-webkit-keyframes scale-bg{
    from{
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
    to{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    }
    @keyframes scale-bg{
    from{
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
    to{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
}

改为

/*banner背景图片动画*/
@-webkit-keyframes scale-bg{
    from{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    to{
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
    }
    @keyframes scale-bg{
        from{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    to{
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
}