fullpage框架的使用

最新推荐文章于 2024-08-08 08:32:23 发布
最新推荐文章于 2024-08-08 08:32:23 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： FullPage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/51823711
版权
  • 滑动鼠标滑轮，滚动屏幕
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第1节-滑动鼠标滑轮，滚动屏幕</title>
    <link href="jquery.fullPage.css" rel="stylesheet" type="text/css" />
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section{
            text-align: center;
            font-size: 50px;
            color: #fff;
        }
    </style>
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <script>
        $(function(){
            $("#box").fullpage({
                sectionsColor:["red","yellow","green","blue"]
            });
        });
    </script>
</head>
<body>
<div id="box">
    <div class="section">
        <h1>第一屏</h1>
    </div>
    <div class="section">
        <div class="slide">第二屏的第一屏</div>
        <div class="slide">第二屏的第二屏</div>
        <div class="slide">第二屏的第三屏</div>

    </div>
    <div class="section">
        <h1>第三屏</h1>
    </div>
    <div class="section">
        <h1>第四屏</h1>
    </div>
</div>
</body>
</html>

  • 将背景替换为图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第2节-将背景替换为图片</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }

    </style>
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <script>
        $(function(){
            $("#dowebox").fullpage();
        });
    </script>
</head>
<body>
<div id="dowebox">
    <div class="section section1"></div>
    <div class="section section2"></div>
    <div class="section section3"></div>
    <div class="section section4"></div>
</div>
</body>
</html>

 
  • 滚到最后一屏继续滚可回到第一屏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第3节-滚到最后一屏继续滚可回到第一屏</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }

    </style>
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                //循环切换，写在fullpage函数里
                continuousVertical:true
            });
        });
    </script>
</head>
<body>
<div id="dowebox">
    <div class="section section1"></div>
    <div class="section section2"></div>
    <div class="section section3"></div>
    <div class="section section4"></div>
</div>
</body>
</html>

 
  • 使用回调函数，为页面加上动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第4节-使用回调函数。为页面加上动画</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }

    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                afterLoad:function(anchorLink,index){
                    if(index==1){
                        $("#p1").animate({"left":"0"},1000);
                    }

                },
                onLeave:function(index,direction){
                    if(index==1){
                        $("#p1").css("left","-120%");
                    }
                },
            });
        });
    </script>
</head>
<body>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section section3">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>

 
  • 点击菜单滚动屏幕
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第5节-点击菜单滚动屏幕</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }
        #menu{
            position: fixed;
            z-index: 10;
        }
        #menu{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #menu li{
            float: left;
            margin-right: 10px;
            margin-top: 20px;
            width: 100px;
            height: 30px;
            background-color: #dda18f;
            text-align: center;
            line-height: 30px;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                anchors:["page1","page2","page3","page4"],
                menu:"#menu"
            });
        });
    </script>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
</ul>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section section3">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>

 
  • 在项目右边中部带有小圆点，就是项目导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第6节-在项目右边中部带有小圆点，就是项目导航</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }
        #menu{
            position: fixed;
            z-index: 10;
        }
        #menu{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #menu li{
            float: left;
            margin-right: 10px;
            margin-top: 20px;
            width: 100px;
            height: 30px;
            background-color: #dda18f;
            text-align: center;
            line-height: 30px;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                anchors:["page1","page2","page3","page4"],
                menu:"#menu",
                //圆点显示
                navigation:"true",
                //显示在左侧
                navigationPosition:"left",
                //鼠标滑过圆点显示文字
                navigationTooltips:["主页","相册","说说","留言板"],
                //颜色不支持
                navigationColor:"red"
            });
        });
    </script>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
</ul>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section section3">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>

 
  • 定时滚屏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第7节-定时滚屏</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }
        #menu{
            position: fixed;
            z-index: 10;
        }
        #menu{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #menu li{
            float: left;
            margin-right: 10px;
            margin-top: 20px;
            width: 100px;
            height: 30px;
            background-color: #dda18f;
            text-align: center;
            line-height: 30px;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                anchors:["page1","page2","page3","page4"],
                menu:"#menu",
                //圆点显示
                navigation:"true",
                //显示在左侧
                navigationPosition:"left",
                //鼠标滑过圆点显示文字
                navigationTooltips:["主页","相册","说说","留言板"],
                //颜色不支持
                navigationColor:"red"
            });
            //定时滚屏
            setInterval(function(){
                $.fn.fullpage.moveSectionDown();
            },2000);
        });
    </script>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
</ul>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section section3">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>

 
  • 横屏自动滚动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第7节-定时滚屏</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }
        #menu{
            position: fixed;
            z-index: 10;
        }
        #menu{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #menu li{
            float: left;
            margin-right: 10px;
            margin-top: 20px;
            width: 100px;
            height: 30px;
            background-color: #dda18f;
            text-align: center;
            line-height: 30px;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                anchors:["page1","page2","page3","page4"],
                menu:"#menu",
                //圆点显示
                navigation:"true",
                //显示在左侧
                navigationPosition:"left",
                //鼠标滑过圆点显示文字
                navigationTooltips:["主页","相册","说说","留言板"],
                //颜色不支持
                navigationColor:"red"
            });
            //定时滚屏
            setInterval(function(){
                $.fn.fullpage.moveSlideRight();
            },3000);
        });
    </script>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
</ul>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section">
        <div class="slide section3">第三页1</div>
        <div class="slide section3">第三页2</div>
        <div class="slide section3">第三页3</div>
        <div class="slide section3">第三页4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>

 
  • 根据可视区域大小自适应样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第9节-根据可视区域大小自适应样式</title>
    <link rel="stylesheet" href="jquery.fullPage.css">
    <script src="jquery-1.12.3.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section1{
            background:url(image/1.jpg) 50%;
        }
        .section2{
            background:url(image/2.jpg) 50%;
        }
        .section3{
            background:url(image/3.jpg) 50%;
        }
        .section4{
            background:url(image/4.jpg) 50%;
        }
        #dowebox{
            text-align: center;
            color: #bd4040;
            font-size: 30px;
        }
        #p1{
            position: relative;
            left: -120%;
        }
        #menu{
            position: fixed;
            z-index: 10;
        }
        #menu{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #menu li{
            float: left;
            margin-right: 10px;
            margin-top: 20px;
            width: 100px;
            height: 30px;
            background-color: #dda18f;
            text-align: center;
            line-height: 30px;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function(){
            $("#dowebox").fullpage({
                continuousVertical:"true",
                anchors:["page1","page2","page3","page4"],
                menu:"#menu",
                //圆点显示
                navigation:"true",
                //显示在左侧
                navigationPosition:"left",
                //鼠标滑过圆点显示文字
                navigationTooltips:["主页","相册","说说","留言板"],
                //颜色不支持
                navigationColor:"red"
            });
            //定时滚屏
            setInterval(function(){
                $.fn.fullpage.moveSectionDown();
            },2000);
            //自适应
            $(window).resize(function(){
                autosize();
            });
            function autosize(){
                var $width=$(window).width();
                if($width>1024){
                    $.fn.fullpage.setAutoScrolling(false);
                }else {
                    $.fn.fullpage.setAutoScrolling(true);
                }
            }

        });
    </script>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
</ul>
<div id="dowebox">
    <div class="section section1">
        <h1>第一页</h1>
        <p id="p1">我是第一页的文字内容</p>
    </div>

    <div class="section section2">
        <h1>第二页</h1>
        <p id="p2">我是第二页的文字内容</p>
    </div>

    <div class="section section3">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>

    <div class="section section4">
        <h1>第四页</h1>
        <p id="p4">我是第四页的文字内容</p>
    </div>
</div>
</body>
</html>
ZhangXD_BLOG
关注
专栏目录
fullpage 的方法介绍及使用
wenxin_liu的博客
05-31 2636
fullpage 的方法 moveSectionUp(): 向上滚动一页 moveSectionDown(): 向下滚动一页 moveTo(section,slide): 滚动到第几页 第几个幻灯片 section从1开始 slide从0开始 使用方式 $.fn.fullpage.XXX() selientMoveTo(): 滚动到第几页和moeTo一样 只不过没有动画效果 moveSlideRi
JS(fullpage)的使用
qq_45621713的博客
10-11 333
fullpage 全屏插件 鼠标滚轮事件，绑定页面宽高 fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。 全球最大代码托管网站 github 官网 https://github.com/alvarotrigo/fullPage.js 中文演示地址 http://www.dowebok.com/demo/2014/77/ 主要功能有： ...
Query全屏滚动插件FullPage代码-全屏网站html5框架
06-09
fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站 主要功能 • 支持鼠标滚动 • 支持前进后退和键盘控制 • 多个回调函数 • 支持手机、平板触摸事件 • 支持 CSS3 动画 • 支持窗口缩放 • 窗口缩放时自动调整 • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 兼容性 fullPage.js 支持 IE8+ 及其他现代浏览器。
fullpage框架
weixin_45846357的博客
05-31 159
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。 支持手机，平板触摸事件。 支持css3动画。 支持窗口缩放。 窗口缩放时自动调整。 可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。 2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本
Vue-fullpage.js 使用教程
最新发布
gitblog_00009的博客
08-08 692
Vue-fullpage.js 使用教程 vue-fullpage.jsOfficial Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/项目地址:https://gitcode.com/gh_mirrors/vu/vue-fullpage.js 项目介绍 Vue-fullpage.js 是一个官方的 Vue....
Fullpage.js 框架种种
qq_28203181的博客
04-02 1087
    Fullpage.js 框架fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。 一、fullPage.js实现全屏        fullPage.js是开源的JQuery插件库，其Github地址：点击打开链接。1、基本演示 &lt;!--引入Fullpage.cs...
fullPage.js全屏垂直滚动插件，在Nuxt3框架中的应用
分享前端技术心得
03-01 641
最近的一个项目（官网开发）需要用到Nuxt3框架，进行服务端渲染，这样可以有更好的SEO。插件的适配程度跟Nuxt版本存在关联，如果你使用的是最新的Nuxt3，可能网上的Nuxt2老教程就不适用。
使用vue制作FullPage页面滚动效果
12-11
【使用Vue制作FullPage页面滚动效果】 在前端开发中，创建全屏滚动页面（FullPage）是一种常见的设计手法，能够给用户带来独特的浏览体验。Vue.js作为一款轻量级的MVVM框架，提供了强大的组件化功能，使得实现这样...
基于FullPage插件，结合HTML5、CSS3封装的移动页小框架.zip
02-14
【标题】中的“基于FullPage插件，结合HTML5、CSS3封装的移动页小框架”揭示了这个项目的...开发者可以通过学习和使用这个框架，快速创建具有专业水准的全屏滚动网页，同时也可以深入了解HTML5的新特性及其实际应用。
fullpage react
11-21
在React框架中，我们可以利用fullpage-react库来轻松创建这种效果，提升用户体验，尤其是在展示产品、讲述故事或制作介绍页面时。 **一、fullpage-react简介** fullpage-react是基于React的一个全屏滚动组件库，它...
多种屏幕切换效果fullPage.js自适应屏幕效果
10-30
多种屏幕切换效果fullPage.js自适应屏幕效果
page基础框架代码
11-10
page基础框架代码
fullpage全屏响应式手机导航菜单
11-20
fullpage全屏响应式手机导航菜单
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名@ imac2。 感谢VasiliyGryaznoy Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名@ imac2。 感谢VasiliyGryaznoy，dragg和Raphael Owino目录安装许可证使用选项方法使用Nuxt.js进行回调的用法贡献资源安装终端：//使用bower bower install vue-fullpage.js //使用npm npm install --save vue-fullpage .js许可证非开源许可证如果要使用vue-fullpage进行开发
微信小程序-微信小程序,全屏动画滚动
08-05
wechatapp-fullpage-scroll
使用了fullpage进行整页面的滑动，使用echats的框架进行表格的绘制。该项目主要针对数据采集的数据展示工作。.zip
01-04
在本项目中，开发者采用了Fullpage.js库来实现全屏滚动的效果，并利用ECharts框架进行数据可视化，构建了一个专门用于数据展示的平台。这个平台可能适用于大数据分析、数据采集后的结果呈现，以及对数据集的深入理解...
快速提示：使用fullPage.js和Animate.css滚动动画
Web design 教程小屋
07-06 1393
在上一教程中 ，我向您介绍了fullPage.js ，这是一个流行的jQuery插件，用于构建全屏页面。 在此快速提示中，我将向您展示如何使用fullPage.js和animate.css创建基于滚动的动画。 所需的图书馆 出于本示例的目的，我设置了一个演示页面 。 如果您在“ 设置”标签下查看，您会看到我在笔中包含了以下库： fullPage.js animate.css ...
探索全屏滚动特效库FullPage：让网页设计更具视觉冲击力
gitblog_00006的博客
04-12 466
探索全屏滚动特效库FullPage：让网页设计更具视觉冲击力 项目地址:https://gitcode.com/powy1993/fullpage 项目简介 FullPage 是一个由 powy1993 开发的轻量级、高性能的全屏滚动效果库。这个开源项目旨在帮助开发者轻松实现富有动态和创意的全屏滚动页面，为网站增添引人入胜的用户体验。 技术分析 FullPage 库基于 JavaScript 编写...
fullPage：轻量级全屏滚动框架，无jQuery依赖
"基于jQuery实现全屏滚动效果，fullPage是一个轻量级的框架，兼容性好，可独立使用，不依赖任何JS库，大小不到9KB。它支持水平滚动和丰富的动画效果，适用于构建个人主页或网页应用。" 在网页设计中，全屏滚动效果...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值