fullpage+animeta实现官网全屏定位滚动+动画交互

最新推荐文章于 2024-09-13 22:06:08 发布

要帅气

最新推荐文章于 2024-09-13 22:06:08 发布

阅读量756

点赞数

分类专栏： jquery 文章标签： jquery html css

本文链接：https://blog.csdn.net/weixin_50316900/article/details/124475669

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

fullpage.js下载

fullpage.js下载地址pullpage.js
解压文件找到dist目录下复制到项目中
在这里插入图片描述

animeta下载

animeta.css 开源社区下载地址
 animeta.css 官网下载地址

本地引入所需js和css后

代码结构

 <div id="fullpage">
                <div class="section" active>屏一</div>
                <div class="section">屏二</div>
                <div class="section">屏三</div>
                <div class="section">屏四</div>
                <div class="section">屏五</div>
  </div>

  <script>
        $(function () {
            $('#fullpage').fullpage({   
                 //配置可滚局项目条件添加  以下是基本用得到的  
                scrollingSpeed:1000,//页面切换速度
                loopTop:true,
                loopBottom:true,
                css3:true,
                fitToSection:true,
                touchSensitivity:5, //在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100,越大则越难滑动
                keyboardScrolling:true,//是否可以使用键盘方向键导航，默认为true
                scrollBar:true,//滚动条
                continuousVertical:true,//循环滚动没生效
                navigation:true, //开启导航
                navigationPosition:"right", //导航位置
                navigationTooltips:["TOP","产品中心","新闻资讯","合作伙伴","BOTTOM"], //导航提示内容   
                //下面是屏幕滚动锚点页面事件 根据对应页面的触发做对应页面的动画            
                  afterLoad:function (link, index) {
                    if(index.index == 1){
                        $('.cp_title').animate({"opacity":"1"});                        
                    }
                    if(index.index == 2){
                        $('.news_title').addClass('animated bounceInDown');                       
                    }
                    if(index.index == 3){
                        $('.hz_title').addClass('animated bounceInDown');
                    }                  
                  }
            })
        })
    </script>