用jquery+fullpage.js做出满屏动画+右侧联动效果

最近做官网,UI需求是做一个满屏滑动动画以及右侧有联动按钮可以点击跳转的一个效果,如下所示
在这里插入图片描述
上图是用jquery+fullpage.js实现的简单的一个demo。
思路:
右侧的导航条分别是三个不同的div(right-item),白色的导航标识部分是一个单独的div(.test),滚动到相应屏幕控制它的定位,覆盖掉下面的部分。左侧跟随滚动的部分是根据白色标识(.test)相对定位的。根据fullpage的api(afterLoad)判断下是第几个屏幕,js DOM操作控制下class,之后再加上动画效果就可以了。
上代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./fullpage.css" />
    <style>
        .footer {
            padding: 50px 0;
        }

        .myContent {
            height: 250px;
        }

        .right {
            position: fixed;
            right: 30px;
            top: 30%;
        }

        .right-item {
            height: 100px;
            width: 20px;
            margin-top: 10px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, .6);
            border: 1px solid #ddd;
        }

        .test {
            margin-top: 0;
            position: relative;
            background-color: #fff;
            transition: transform 1s ease-out;
        }

        .test-0 {
            transform: translateY(0);
        }

        .test-1 {
            transform: translateY(110px);
        }

        .test-2 {
            transform: translateY(220px);
        }

        .img {
            position: absolute;
            left: -50px;
            width: 30px;
            height: 100px;
            top: 0;
            background-color: pink;
            transition: background-color 1s ease-in-out;
        }

        .test-0 .img {
            background-color: gray;
        }

        .test-1 .img {
            background-color: skyblue;
        }

        .test-2 .img {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="fullpage">
        <div class="section " id="section0">
            <h1>fullPage.js</h1>
            <p>Auto-height sections</p>
            <img src="imgs/fullPage.png" alt="fullPage" />
        </div>
        <div class="section" id="section1">
            <div class="intro">
                <h1>Ideal for footers</h1>
                <p>Or any other section rather than the 1st one</p>
            </div>
        </div>
        // fp-auto-height调用section/slide自定义的高度
        <div class="section fp-auto-height" id="section2">
            <div class="myContent">
                <div class="intro footer">
                    <h1>My footer</h1>
                    <p>This could be my footer.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="right-item">
            <div class="test right-item">
                <div class="img"></div>
            </div>
        </div>
        <div class="right-item"></div>
        <div class="right-item"></div>
    </div>
    <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="./fullpage.min.js"></script>
    <script>
        $('#fullpage').fullpage({
            anchors: ['anchor1', 'anchor2', 'anchor3'],
            menu: '#menu',
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            // 滚动结束后一旦加载section就会触发回调
            /**
			 * param origin {Object} 前置section
			 * param destination {Object} 目标section
			 * 可以通过destination.index来判断目前是第几屏
			 */
            afterLoad(origin, destination) {
                switch (destination.index) {
                    case 0:
                        $('.test').addClass('test-0');
                        $('.test').removeClass('test-1');
                        $('.test').removeClass('test-2');
                        break;
                    case 1:
                        $('.test').addClass('test-1');
                        $('.test').removeClass('test-0');
                        $('.test').removeClass('test-2');
                        break;
                    case 2:
                        $('.test').addClass('test-2');
                        $('.test').removeClass('test-1');
                        $('.test').removeClass('test-0');
                        break;
                    default:
                        break;
                }
            }
        });
    </script>
</body>

</html>

这里引入的是fullpage.js,可以去GitHub下载,官方有详细的文档以供参阅:https://github.com/alvarotrigo/fullPage.js
注意:一定要看自己下载的fullpage版本对不对,我之前下载的2.4的版本的就没有fp-auto-height这个属性。

发布了7 篇原创文章 · 获赞 1 · 访问量 113
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览