typeit/sandbox.html at master · indyoner/typeit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
	<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200italic,400,600,600italic,700">

    <style>
      * {
        font-family: 'Source Sans Pro', sans-serif;
      }

      body {
        padding: 0 50px;
      }

      h3 {
        font-weight: normal;
      }

      section {
        padding: 20px;
      }

      section:nth-child(2n) {
        background: #d3d3d396;
      }
    </style>

	</head>

	<body>

    <section>
      <h2>Single String</h2>
      <h3 id="example1"></h3>
    </section>

    <section>
      <h2>Multiple Strings</h2>
      <h3 id="example2"></h3>
    </section>

    <section>
      <h2>HTML, Delete &amp; Replace Each Other</h2>
      <h3 id="example3"></h3>
    </section>

    <section>
      <h2>Looping Strings</h2>
      <h3 id="example4"></h3>
    </section>

    <section>
      <h2>Companion Functions</h2>
      <h3 id="example5"></h3>
    </section>

    <section>
      <h2>Hard-Coded String</h2>
      <h3 id="example6"><!-- This comment should be removed automatically. Don't worry about it being typed. -->This string is hard-coded!</h3>
    </section>

    <script src="dist/typeit.min.js"></script>

		<script>
      window.instance = new TypeIt('#example1', {
        speed: 50,
        strings: 'Just a simple string.',
        cursorChar: '<strong>CUSTOM CURSOR!</strong>'
      }).go();

      new TypeIt('#example2', {
        speed: 50,
        strings: ['This is my first example.', 'It has several strings!'],
        cursor: false,
        startDelay: 3000
      }).go();

      new TypeIt('#example3', {
        speed: 50,
        strings: [
          'This is my <strong>second</strong> example.',
          'This should <strong>replace</strong> the second string!'
        ],
        breakLines: false
      }).go();

      new TypeIt('#example4', {
        speed: 50,
        strings: ['My first string.', 'My second string.'],
        loop: true
      }).go();

      new TypeIt('#example5', {
        speed: 100
      })
        .type('Here\'s my first sting.')
        .pause(500)
        .delete(4)
        .pause(500)
        .type('ring.')
        .pause(500)
        .delete()
        .pause(500)
        .options({
          speed: 25
        })
        .type('And here it is faster!')
        .go();

      new TypeIt('#example6', {
        waitUntilVisible: true
      }).go();
		</script>
	</body>
</html>