jquery 插件 typed.js(打印机打字效果)

最新推荐文章于 2024-07-27 20:59:00 发布

J_Wangzai

最新推荐文章于 2024-07-27 20:59:00 发布

阅读量494

点赞数 9

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/J_1999_0524/article/details/135508406

版权

文章目录

typed.js

typed.js

官网链接

typed.js官网

usage（cdn）

引入js


<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

    var typed = new Typed('#element', {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 50,
    });

html

<span id="element"></span>

case

与jquery.appear插件一起使用，当dom元素出现时，开始打字效果

效果演示

在这里插入图片描述

js


<script src="https://cdn.jsdelivr.net/npm/jquery.appear@1.0.1/jquery.appear.min.js"></script>

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>


   const option = {
            strings: ['感知用心，专注提升 <br> 以技术与服务 <br> 助力实现品牌愿<span class="position-relative d-inline-block">景<span class="fs-0 lh-0 position-absolute start-110 d-inline-block bg-warning rounded-circle circle-1_5r top-80"></span></span>'],
            typeSpeed: 100,
            onComplete: function() {
                $(".typed-cursor").hide();
            }
        }
        $('#specialWord').appear(() => {
            var typed = new Typed('#element', option);
        })

onComplete 动画完成后要执行的方法

html


<p class="fs-9 lh-sm mb-0">
     <span class="" id="element"></span>
</p>

css


/* 光标的样式 */

.typed-cursor {
            font-size: 10rem;
            opacity: 1;
            font-weight: 100 !important;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-moz-keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }