To use this website completely, it is necessary to store cookies on your computer.
 

* Navigator

Expand - Collapse

* Statistic

  • *Total Posts: 14939
  • *Total Topics: 2271
  • *Online Today: 8
  • *Most Online: 292
(2016 November 12, 09:37:31 am)

Animated Typewriter Effect with jQuery typer.js

Started by cieplutki, 2016 February 08, 10:44:21 pm

previous topic - next topic

0 Members and 0 Guests are viewing this topic.

cieplutki

2016 February 08, 10:44:21 pm
Hi
how to add this:
Code Select
<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width'>

        <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Numans'>
        <style>
            html,body{margin:0; padding:0; height:100%; }
            body {
                display: table;
                width: 100%;

                color: black;
                text-align: center;
                font-family: 'Numans', sans-serif;
                white-space: nowrap;

                background: white;
                background: -moz-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
                background: -webkit-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -o-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -ms-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: radial-gradient(ellipse at center, white 0%, #f6f6f6 47%, #ededed 100%);
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=90, style=2);
            }

            div {
                display: table-cell;
                vertical-align: middle;

                text-align: center;
            }

            span { color:#0ae }
        </style>

        <title>jquery.typer.js | The typewriter effect</title>
    </head>

    <body>
        <div id="typer">foo</div>

        <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
        <script src='jquery.typer.js'></script>
        <script>
            var win = $(window),
                foo = $('#typer');

            foo.typer(['<i>Anyone</i> <u>is</u> <b>awesome</b>!', 'Foo is <span>not</span> equal to bar.', 1337]);

            // unneeded...
            win.resize(function(){
                var fontSize = Math.max(Math.min(win.width() / (1 * 10), parseFloat(Number.POSITIVE_INFINITY)), parseFloat(Number.NEGATIVE_INFINITY));

                foo.css({
                    fontSize: fontSize * .8 + 'px'
                });
            }).resize();
        </script>
    </body>
</html>


php or html block and how?



feline

#1
2016 February 09, 08:06:12 pm
That don't work in a block ..
html, header, body are used by smf in the index.template.php, so you can't use that in a block !
Many are stubborn in relation to the path, a few in relation to the target.

cieplutki

#2
2016 February 10, 07:39:49 am
This code not working,
when put on html block - I can paste it wrong
Please show should look like acting block
I do not have any code in index.template



feline

#3
2016 February 10, 01:08:55 pm
As I say above .. the code don't work in a block.
And currently i don't have the time to check this jquery tool...
Many are stubborn in relation to the path, a few in relation to the target.