Hacktoberfest2022/typing_animation.html at main · Shivangi708/Hacktoberfest2022 · 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
<!DOCTYPE html>
<html>
<head>
    <title>Typing Text Animation</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
    <style>
          @import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap");
          * {
              margin: 0;
              padding: 0;
           }
          body {
            background: url("https://images.pexels.com/photos/1363876/pexels-photo-1363876.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            overflow: hidden;
          }
          .heading {
            color: #fff;
            font-family: Comic Neue, sans-serif;
            text-align: center;
            position: relative;
            text-decoration: underline;
            top: 30px;
          }
          .typing-animation .text {
            position: relative;
            top: 250px;
            right: -650px;
            font-size: 30px;
            font-family: Comic Neue, sans-serif;
            margin: 5px 0;
          }
          .typing-animation .text span {
            color: #fff;
            font-weight: 500;
          }
      </style>
</head>
<body>
    <h1 class="heading">Typing Text Animation</h1>
    <section class="typing-animation">
      <div class="text"> <span class="typing"></span></div>
    </section>
    <script>
        var typed = new Typed(".typing", {
        strings: ["Hacktoberfest 2022", "Open Source", "Github"],
        typeSpeed: 100,
        backSpeed: 60,
        loop: true
    });
</script>
</body>
</html>