splitting.min.js文字拆分组合动画插件-BFW插件库

splitting.min.js文字拆分组合动画插件
splitting.min.js文字拆分组合动画插件，让枯燥的文字动起来
使用方式：
第一步引入bfwone
第二步use插件
第三步编写css
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["splitting.min"], function() {
                 Splitting();
            });
        });
    </script>
        <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        .container {
            max-height: 100vh;
            overflow-y: scroll;
            -webkit-perspective: 1000px;
            perspective: 1000px;
            position: relative;
            -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .headline {
            align-items: center;
            display: flex;
            font-family: 'Lexend Deca', sans-serif;
            font-weight: 700;
            font-size: calc(1rem + 15vmin);
            height: 100vh;
            justify-content: center;
            scroll-snap-align: start;
            width: 100vw;
        }
        .headline:nth-child(1) {
            background-color: #f9ca24;
        }
        .headline:nth-child(2) {
            background-color: #3498db;
        }
        .headline:nth-child(3) {
            background-color: #ff7979;
        }
        .headline:nth-child(4) {
            background-color: #1abc9c;
        }
        .headline:nth-child(5) {
            background-color: #e74c3c;
        }
        .headline:nth-child(6) {
            background-color: #f8c291;
        }

        .char {
            -webkit-animation-name: var(--name);
            animation-name: var(--name);
            -webkit-animation-duration: var(--speed);
            animation-duration: var(--speed);
            -webkit-animation-delay: var(--delay);
            animation-delay: var(--delay);
            -webkit-animation-timing-function: var(--ease);
            animation-timing-function: var(--ease);
            -webkit-animation-direction: var(--direction,normal);
            animation-direction: var(--direction,normal);
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            display: inline-block;
            position: relative;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        .headline--fall .char {
            --name: fall;
            --speed: 600ms;
            --delay: calc(var(--char-index) *-0.05s);
            --ease: cubic-bezier(0.165, 0.44, 0.64, 1);
        }

        .headline--jog .char {
            --name: jog;
            --speed: 500ms;
            --delay: calc(var(--char-index) *-0.025s);
            --ease: linear;
        }
@-webkit-keyframes jog {
            0% {
                -webkit-transform: translate(0, 0) rotate(5deg);
                transform: translate(0, 0) rotate(5deg);
            }
            25% {
                -webkit-transform: translate(5%, -5%) rotate(10deg);
                transform: translate(5%, -5%) rotate(10deg);
            }
            50% {
                -webkit-transform: translate(5%, 0) rotate(15deg);
                transform: translate(5%, 0) rotate(15deg);
            }
            75% {
                -webkit-transform: translate(10%, -5%) rotate(10deg);
                transform: translate(10%, -5%) rotate(10deg);
            }
            100% {
                -webkit-transform: translate(0, 0) rotate(5deg);
                transform: translate(0, 0) rotate(5deg);
            }
        }
@keyframes jog {
            0% {
                -webkit-transform: translate(0, 0) rotate(5deg);
                transform: translate(0, 0) rotate(5deg);
            }
            25% {
                -webkit-transform: translate(5%, -5%) rotate(10deg);
                transform: translate(5%, -5%) rotate(10deg);
            }
            50% {
                -webkit-transform: translate(5%, 0) rotate(15deg);
                transform: translate(5%, 0) rotate(15deg);
            }
            75% {
                -webkit-transform: translate(10%, -5%) rotate(10deg);
                transform: translate(10%, -5%) rotate(10deg);
            }
            100% {
                -webkit-transform: translate(0, 0) rotate(5deg);
                transform: translate(0, 0) rotate(5deg);
            }
        }
        .headline--jump .char {
            --name: jump;
            --speed: 800ms;
            --delay: calc(var(--char-index) *0.075s);
            --ease: cubic-bezier(0.165, 0.44, 0.64, 1);
        }


    </style>
</head>
<body>
       <main class="container">

        <h2 data-splitting class="headline headline--jog">bfw.wiki</h2>

    </main>

</body>
</html>
splitting.min.js文字拆分组合动画插件

网友评论0

packer.js

jspdf.js

jszip.js

doT.js

jqprint.js

art-template.js

pdfobject.js

json-viewer.js

mergely.js

currencyFormatter.js
