素材牛

jQuery fullpage响应式全屏滚动

 所属分类:网页特效-UI效果/布局,滚动/拖拽,独立部件

 浏览:95次-  下载:2次-  评论:0次-  发布时间:2019-03-19
jQuery fullpage响应式全屏滚动兼容IE10
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:瀑布流全屏滚动,绚丽的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) {
    }
})

文件目录结构

  • css
    • ┝ animate.css
    • ┝ head.css
    • ┝ index.css
    • ┝ jquery.fullPage.css
    • ┝ reset.css
    • ┝ slick.css
    • ┝ swiper.min.css
  • image
    • ┝ 2.jpg
    • ┝ 3.jpg
    • ┝ banner1.jpg
    • ┝ banner2.jpg
    • ┝ banner3.jpg
    • ┝ banner4.jpg
    • ┝ ban_next.png
    • ┝ ban_next_hover.png
    • ┝ ban_prev.png
    • ┝ ban_prev_hover.png
    • ┝ closed.png
    • ┝ logo.png
    • ┝ logo2.jpg
  • ┝ index.html
  • js
    • ┝ index.js
    • ┝ index_slick.js
    • ┝ jquery.fullPage.js
    • ┝ jquery.fullPage.min.js
    • ┝ jquery.min.js
    • ┝ slick.js
    • ┝ swiper.min.js

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:2
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证