MENU

写了个有意思的打字机效果(HTML+CSS+JS)

• April 20, 2022 • Read: 10238 • 精选资源,学习笔记

打字机

最近在做企业官网,写了个挺有意思的效果,很符合这家科技公司的内容方向。

因为以前有看到过TX用过类似的,于是想自己做一个,结果当然是很成功啦!

就像自己在打字一样,哈哈~

B格满满,如果是你会愿意在这个页面多停留几秒吗?


下面附上代码(拿了说一声,别不声不响哦)

HTML

<h2>泰科智能 </h2>
<h2 class="container"></h2>
<h2 class="delete"></h2>

CSS

.daziji{
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: relative;
    font-size: 50px;
    letter-spacing: .2em;
   
}
.daziji h2{
    margin: 50px 0 20px;
    color: #fff;display: initial;
}
.container{
    margin-right: 5px;
}
.delete{
    border-right: 2px solid #fff;
    /*step-end是动画过渡效果,设置step-end代表不过渡*/
    animation: blingbling 1s step-end infinite;
}
@keyframes blingbling{
    from,to{
        border-color: transparent;
    }
    50%{
        border-color: #fff;
    }
}

JavaScript

const data = ["协手未来!","开启自动化新时代","构建更智能的世界","轻巧智动 协作无间"];
//打字机文字 英文","分隔
const container = document.getElementsByClassName('container')[0];
const Delete = document.getElementsByClassName('delete')[0];
//data数组的下标
let index = 0;
//data数组每一项字符串的下标
let strIndex = 0;
//开始的时间或是上一刻的时间
let start = null;
//上次操作与现在的时间间隔
let interval = 0;
//每次变化的间隔
let change = 500;
//现在是否是删除状态
let isDelete = false;
//根据requestAnimationFrame定义,这是一个回调函数,这个函数会
//传入一个参数,用来表示执行回调函数的时刻
function blink(time){
    //这个方法必须在函数内部再调用一次才会无限循环调用
    window.requestAnimationFrame(blink);
    //如果不存在开始的时间,说明是第一次进入函数
    if(!start){
        start = time;
    }
    //计算现在与上次操作差了多久
    interval = time - start;
      //如果大于间隔时间,则应该执行新的操作
    if(interval > change){
          //取出数组的某一个字符串
        let str = data[index];
        //不在删除状态
        if(!isDelete){
            //change是时间间隔,使用随机数,模仿不同的打字时间
            change = 500 - Math.random()*400;
            container.innerHTML = str.slice(0,++strIndex);
           
        }
        else{
            container.innerHTML = str.slice(0,strIndex--);
        }
        //当前进行了操作,需要保存当前的时间
        start = time;
        //对字符串进行判断,全部打印后则删除
        if(strIndex == str.length){
            isDelete = true;
            change = 200;
            start = time + 1200;
        }
        //删除后打印下一个
        if(strIndex <0){
            isDelete = false;
            start = time + 200;
            index++;
            
        }
        if(index == data.length){
            index = 0;
        }
    }
}

window.requestAnimationFrame(blink);

写了个有意思的打字机效果(HTML+CSS+JS) - 原文链接:http://blog.isww.cn/1430.html

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

8 Comments
  1. 鸟叔来串门,通过虫洞穿梭至此,期待回访!

    1. @鸟叔已回访~@(真棒)

  2. 代码拿走了哈

    1. @芭比请慢用

  3. 十年之约虫洞-思远博客-期待回访

    1. @思远已回访~@(真棒)

  4. 旺仔小可爱 旺仔小可爱

    您好~我是腾讯云+社区的运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan
    作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。

    1. @旺仔小可爱云 + 社区我有加入哦

开往-友链接力