TAnimations/index.html at main · Divyam907/TAnimations · 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
<!-- This is a sample interface for testing Tecxick Web Animation Libraries
    * Can be used as a documentation -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tecxick/TAnimations@v1.0.1/TAnimations.css"/>
    <script src="https://cdn.jsdelivr.net/gh/tecxick/TAnimations@v1.0.1/TAnimations.js"></script>
    <title>Tecxick Web Animations</title>
</head>
<body>
    <section>
        <h1>Tecxick Web Animations</h1>
        <p>Scroll Down to see examples</p>
    </section>
    <div class="wrapper" style="margin-top: 100vh;">
        <div data-scroll="zoom-in">zoom-in</div>
        <!-- <div data-scroll="zoom-out">zoom-out</div> -->
        <div data-scroll="zoom-in-left">zoom-in-left</div>
        <!-- <div data-scroll="zoom-out-left">zoom-out-left</div> -->
        <div data-scroll="zoom-in-right">zoom-in-right</div>
        <!-- <div data-scroll="zoom-out-right">zoom-out-right</div> -->
        <div data-scroll="zoom-in-top">zoom-in-top</div>
        <!-- <div data-scroll="zoom-out-top">zoom-out-top</div> -->
        <div data-scroll="zoom-in-bottom">zoom-in-bottom</div>
        <!-- <div data-scroll="zoom-out-bottom">zoom-out-bottom</div> -->
        <div data-scroll="slide-in-left">slide-in-left</div>
        <!-- <div data-scroll="slide-out-left">slide-out-left</div> -->
        <div data-scroll="slide-in-right">slide-in-right</div>
        <!-- <div data-scroll="slide-out-right">slide-out-right</div> -->
    </div>
    <script>
        AnimInit();
    </script>
</body>
</html>