scroll-animation-with-intersection-observer-and-gsap/index.html at main · frontzinga/scroll-animation-with-intersection-observer-and-gsap · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My hero academia - Intersection observer</title>
    <link href="style.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <header>
        <h1 class="title">MHA</h1>
        <div>My<br />Hero<br />Academia</div>
    </header>

    <section class="midoriya">
        <div class="circle"></div>
        <div class="container">
            <div class="left ">
                <img src="/img/midoriya.webp" alt="Midoriya" />
            </div>
            <div class="right">
                <div class="name">
                    <h2 class="title">
                        Midoriya
                    </h2>
                    <span class="underline"></span>
                </div>
                <p>
                    <span>Full name: <strong>Midoriya Izuku</strong></span>
                    <span>Alias: <strong>Deku</strong></span>
                    <span>Birthday: <strong>July 15</strong></span>
                    <span>Age: <strong>16</strong></span>
                    <span>Gender: <strong>Male</strong></span>
                    <span>Height: <strong>166 cm</strong></span>
                    <span>Hair color: <strong>green</strong></span>
                    <span>Eye color: <strong>green</strong></span>
                    <span>Quirk: <strong>One for All</strong></span>
                </p>

            </div>
        </div>
    </section>

    <section class="bakugo">
        <div class="circle"></div>
        <div class="container">
            <div class="left">
                <img src="/img/bakugo.webp" alt="Bakugo"/>
            </div>
            <div class="right">
                <div class="name">
                    <h2 class="title">
                        Bakugo
                    </h2>
                    <span class="underline"></span>
                </div>
                <p>
                    <span>Full name: <strong>Bakugō Katsuki</strong></span>
                    <span>Alias: <strong>Dynamight</strong></span>
                    <span>Birthday: <strong>April 20</strong></span>
                    <span>Age: <strong>16</strong></span>
                    <span>Gender: <strong>Male</strong></span>
                    <span>Height: <strong>172 cm</strong></span>
                    <span>Hair color: <strong>blonde</strong></span>
                    <span>Eye color: <strong>red</strong></span>
                    <span>Quirk: <strong>Explosion</strong></span>
                </p>

            </div>
        </div>
    </section>

    <section class="todoroki">
        <div class="circle"></div>
        <div class="container">
            <div class="left">
                <img src="/img/todoroki.webp" alt="Todoroki"/>
            </div>
            <div class="right">
                <div class="name">
                    <h2 class="title">
                        Todoroki
                    </h2>
                    <span class="underline"></span>
                </div>
                <p>
                    <span>Full name: <strong>Todoroki Shōto</strong></span>
                    <span>Alias: <strong>Shoto</strong></span>
                    <span>Birthday: <strong>January 11</strong></span>
                    <span>Age: <strong>16</strong></span>
                    <span>Gender: <strong>Male</strong></span>
                    <span>Height: <strong>176 cm</strong></span>
                    <span>Hair color: <strong>white/crimson</strong></span>
                    <span>Eye color: <strong>dark gray</strong></span>
                    <span>Quirk: <strong>Half cold Half hot</strong></span>
                </p>

            </div>
        </div>
    </section>
    <footer>
        <h6 class="title">@frontzinga</h6>
    </footer>
</body>

</html>