-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
93 lines (70 loc) · 3.12 KB
/
about.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.css">
<title>Assignment 2a/b: JavaScript</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class = "ui grid stackable container">
<a href="index.html">
<img src="images/lobaLogo.png" id="logo" alt="Roma Logo">
</a>
<nav class="ui top attached tabular stackable menu">
<a class="item" href = "index.html">Home</a>
<a class="item" href = "team.html">Team</a>
<a class="item" href = "topPlayers.html">Top Players</a>
<a class="item" href = "winAPrize.html">Win A Prize</a>
<a class="active item" href = "about.html">About</a>
</nav>
<div class = "ui sixteen wide center aligned column">
<header>
<h1 class="ml15">
<span class="word">About</span>
<span class="word">This</span>
<span class="word">New</span>
<span class="word">Plugin</span>
</h1>
</header>
</div>
<div class = "ui computer row">
<div class ="ui sixteen wide column"><img src="images/anime1.png" alt = "Picture of Roma Stadium" class = "ui fluid image"></div>
</div>
<main>
<p class="prize">This plugin is called anime.js. I used it to create animation on the Title of each web page. I was able to make each word pop up one by one, and set the delay of one word showing up after the other. </p>
<p class="prize">This animation can be customized, you could also make the words appear and disappear by looping the animation, however since I used it for titles I turned the loop to false.</p>
<p class="prize">Moreover, anime.js does not only do this, there are so many more things you can do with it, including 3d animation. However, most features can be very complex and require to learn more about how to implement them properly.</p>
<br>
</main>
<footer class = "sixteen wide center aligned column">
<p class="pfooter">© AS ROMA - All rights reserved</p>
<p class="pfooter"><a href="mailto:[email protected]" class="indexQuoteLinks">AS Roma Email</a></p>
</footer>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.js"></script>
<script src = "js/javaScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
anime.timeline({loop: false})
.add({
targets: '.ml15 .word',
scale: [14,1],
opacity: [0,1],
easing: "easeOutCirc",
duration: 1200,
delay: (el, i) => 800 * i
}).add({
targets: '.ml15',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 10000000000000000
});
</script>
</body>
</html>