制作书写明信片的动画效果

分类栏目:用户体验 - 前端开发

276188

发布于 17 条评论

下面将分享一个用css和javascript模拟手写明信片的动画效果。在写信的过程中,当笔变干的时候 , 会自动的去浸入墨水;当写错了字,怎么办?没关系,他会划掉重新写。嘿嘿。强大把,现在我们一起来看看他的实现方法以及效果。

明信片

第一步:准备HTML代码

首先,我们先创建基本的html代码文件和信的内容:

index.html

<div id="letter"></div>
<img id="inkwell1" src="inkwell1.gif" alt="inkwell1" />
<img id="inkwell2" src="inkwell2.gif" alt="inkwell2" />
<div id="letter_src">
A man named Grant once foi|und a box of old Papers in his dwelling||||||||house. Grant didn't like old things. So he burned most of the papers. But one of these papers was a letter. He read it. A well-known writer had written it.<br><br>
'About a million|||||||hundred years ago nobody know about him|||this writer,' thought Grant. 'Nobody read his books. But now everybody reads him. Some people like to buy old letters. I can get a lot of money for this letter.'<br><br>
But the letter looked dirty. So Grant decided to wash |||||clean it. He worked hard and soon the letter looked new. Grant was not|||||||was very happy.<br><br>
He took the letter to a shop in London where they bought and sold old papers. 'I want to sell this letter,' Grant said to the man in shop. 'It is a well-known writer's letter. How much will you give me for it?'<br><br>
The man looked at the letter for a long time. 'I'll give you two pounds for it,' he said at last.<br><br>
'Only two pounds!' said Grant. 'But people pay ten pounds for old letters. And I have even cleaned it.'<br><br>
'I can see that,' said the man. 'That's the mistake. People who buy old papers like dirty papers more than clean papers.'<br><br>
</div>

第二步:定义CSS样式文件

body {
    background: url('bg.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#inkwell1 {
    bottom: 100px;
    left: 140px;
    position: fixed;
}
#inkwell2 {
    bottom: 100px;
    left: 140px;
    position: fixed;
    visibility: hidden;
}
#letter {
    font-family: Comic Sans MS;
    font-size: 18px;
    font-weight: bold;
    margin: 50px auto;
    position: relative;
    width: 75%;
}
#letter_src {
    display: none;
}

第三步:创建javascript文件

window.onload = function(){
    // public variables
    var vLetter = document.getElementById('letter');
    var iSpeedInk = 5;

    // other variables
    var sText = document.getElementById('letter_src').innerHTML;
    var iCurChar = 0;
    var sChars = '<span>';
    var iCurInk = 0;
    var sCurCaret = '';
    var sCaret = "&nbsp;<img src='pen.gif' style='position:absolute' />";

    var doStep = function () {
        // current char
        var sChar = sText.charAt(iCurChar);

        // default char delay
        var iDelay = 32;

        if (sChar == '') {
            sCurCaret = '';
        } else if (sChar == '|') { // we use | symbol to emulate 'error' symbol
            sChar = '';
            sChars = sChars.substring(0, sChars.length-1);
            iDelay = 64;
        } else if (sChar == '<') { // pass tags
            var iPos = sText.indexOf('>', iCurChar);
            sChar = sText.substring(iCurChar, iPos + 1);
            iCurChar = iPos;
        } else if (sChar == '&') { // pass html entities
            var iPos = sText.indexOf(';', iCurChar);
            sChar = sText.substring(iCurChar, iPos + 1);
            iCurChar = iPos;
        } else if (sChar == '.') { // custom delay in case of . symbol
            iDelay = 300;
        } else if (sChar == ',') { // custom delay in case of , symbol
            iDelay = 100;
        } else if (sChar == ' ') { // custom delay in case of space symbol
            iDelay = 32;
        } else if (iCurChar > 5) {
            sCurCaret = sCaret;
        }

        // expenditure of ink
        if (sChar == ' ') {
            iCurInk += iSpeedInk;
            sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;
        }

        if (document.getElementById('inkwell2').style.visibility == 'visible') {
            sCurCaret = sCaret;
            document.getElementById('inkwell2').style.visibility = 'hidden';
            sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;
        }

        // refresh Ink
        if (iCurInk > 160) {
            iCurInk = 0;
            document.getElementById('inkwell2').style.visibility = 'visible';
            iDelay = 1000;
            sCurCaret = '';
        }

        // add current char to chars
        sChars += sChar;

        // hide the caret at the end of the letter
        if (iCurChar == sText.length - 1)
            sCurCaret = '';

        // update letter with new chars
        vLetter.innerHTML = sChars + sCurCaret;

        // goto next char
        iCurChar++;

        // next step
        if (iCurChar < sText.length) {
            setTimeout(doStep, 20 + iDelay);
        }
    }

    doStep();
};

ok,一起来看看demo吧,也一起提供附件下载。

查看预览下载附件

原文地址:script-tutorials.com

全部评论 / 17

  1. @ 老杨 :
    发现一个bug,英文时会自己去沾墨水,中文时不可以

    知道了,使用空格区分,英文一个单词一个空格,中文没空格

    老杨 2012-09-04
    12
  2. 发现一个bug,英文时会自己去沾墨水,中文时不可以

    老杨 2012-09-04
    11
  3. 支持中文的!只要修改下index.html文件,然后另存为utf-8格式!

    正仔 2012-09-04
    10
  4. 不支持中文,这个是硬伤

    yangy608 2012-09-04
    9
  5. 这个很牛X,逢年过节、过个生日啥的,做好后发个链接过去,那气派啊!收了源码

    8
  6. 预览了下,有点意思,墨水还能变淡,但有一个就是:既然是书写的写错了是不是直接划掉效果会更好点,擦掉有点像删除的

    lothee 2012-09-04
    7
    1. Javin

      嗯,这个建议不错,既然来源于生活,那就还原生活

      1号 Javin 2012-09-04
  7. 很好啊,非常喜欢

    6
  8. 帅锅。网站很漂亮啊~

    阿Ken 2012-09-04
    5
  9. 帅惨了

    得瑟空间 2012-09-04
    4
    1. Javin

      多谢支持 :grin:

      1号 Javin 2012-09-04
  10. 不错不错啊

    黄遮天 2012-09-04
    3
    1. Javin

      喜欢就好 :cool:

      1号 Javin 2012-09-04
  11. 不错

    钟远强 2012-09-04
    2
    1. Javin

      汗颜…… :?:

      1号 Javin 2012-09-04
  12. :grin:

    蘑菇 2012-09-04
    1
    1. Javin

      谢谢你的大爱

      1号 Javin 2012-09-04