Skip to content

Commit 00c6915

Browse files
GeeDookGeeDook
authored
Merge pull request #10 from imdanieldev/main
Add animation and change font
2 parents cf6e2bf + f101d38 commit 00c6915

5 files changed

Lines changed: 59 additions & 25 deletions

File tree

‎aos.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aos.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="./style.css">
8+
<link rel="stylesheet" href="./aos.css">
89
<link rel="preconnect" href="https://fonts.googleapis.com">
910
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100..900&display=swap" rel="stylesheet">
1112
<title>Mirava</title>
1213
</head>
1314
<body>
14-
<div class="open-sans min-h-svh w-full bg-neutral-900 text-white flex flex-col items-center justify-between px-1 py-1">
15+
<div class="min-h-svh w-full bg-neutral-900 text-white flex flex-col items-center justify-between px-1 py-1">
1516
<div class="flex flex-col items-center justify-center">
16-
<h1 class="title">Mirava</h1>
17-
<p class="caption">
18-
Mirava is a curated list of Iranian package mirrors, providing reliable and fast access to essential software resources within Iran.
17+
<h1 class="title" id="title"></h1>
18+
<p class="caption" id="caption">
1919
</p>
2020
</div>
2121
<div class="flex items-center justify-center px-1 gap-1 mt-1 flex-wrap">
22-
<div class="box">
22+
<div class="box" data-aos="flip-left" data-aos-duration="1000" data-aos-easing="ease-in" data-aos-delay="50">
2323
<h3>Iranrepo</h3>
2424
<p>A local mirror providing various Linux package repositories inside Iran.</p>
2525
<span>Packages:</span>
@@ -35,7 +35,7 @@ <h3>Iranrepo</h3>
3535
</button>
3636
</a>
3737
</div>
38-
<div class="box">
38+
<div class="box" data-aos="flip-right" data-aos-duration="1500" data-aos-easing="ease-in-sine" data-aos-delay="100">
3939
<h3>KubarCloud</h3>
4040
<p>Public software mirror hosted by Kubar Cloud, with wide package coverage.</p>
4141
<span>Packages:</span>
@@ -54,7 +54,7 @@ <h3>KubarCloud</h3>
5454
</button>
5555
</a>
5656
</div>
57-
<div class="box">
57+
<div class="box" data-aos="flip-up" data-aos-duration="2000" data-aos-easing="ease-out-sine" data-aos-delay="150">
5858
<h3>Shatel</h3>
5959
<p>Official mirror provided by the Iranian ISP Shatel.</p>
6060
<span>Packages:</span>
@@ -72,7 +72,7 @@ <h3>Shatel</h3>
7272
</button>
7373
</a>
7474
</div>
75-
<div class="box">
75+
<div class="box" data-aos="flip-down" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-delay="50">
7676
<h3>ITO</h3>
7777
<p>Government-backed repository portal by the Information Technology Organization of Iran.</p>
7878
<span>Packages:</span>
@@ -89,7 +89,7 @@ <h3>ITO</h3>
8989
</button>
9090
</a>
9191
</div>
92-
<div class="box">
92+
<div class="box" data-aos="zoom-in" data-aos-duration="1500" data-aos-easing="ease-in-back" data-aos-delay="100">
9393
<h3>Jamko</h3>
9494
<p>Public software mirror service for various Linux and developer ecosystems.</p>
9595
<span>Packages:</span>
@@ -106,7 +106,7 @@ <h3>Jamko</h3>
106106
</button>
107107
</a>
108108
</div>
109-
<div class="box">
109+
<div class="box" data-aos="zoom-out" data-aos-duration="1000" data-aos-easing="ease-out" data-aos-delay="150">
110110
<h3>Runflare</h3>
111111
<p>High-speed domestic mirror service for popular developer tools and package managers.</p>
112112
<span>Packages:</span>
@@ -135,5 +135,10 @@ <h3>Runflare</h3>
135135
</p>
136136
</div>
137137
</div>
138+
<script src="./aos.js"></script>
139+
<script src="./script.js"></script>
140+
<script>
141+
AOS.init();
142+
</script>
138143
</body>
139144
</html>

‎script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const $ = (el)=>{
2+
return document.querySelector(el);
3+
}
4+
const typeEffect = (el , string)=>{
5+
const text = string;
6+
const arrayText = text.split("") ;
7+
let i = 0;
8+
let type = setInterval(()=>{
9+
$(el).innerHTML += arrayText[i];
10+
i++;
11+
if(i == arrayText.length){
12+
clearInterval(type);
13+
}
14+
},100);
15+
}
16+
typeEffect("#title","Mirava");
17+
setTimeout(()=>{
18+
typeEffect("#caption","Mirava is a curated list of Iranian package mirrors, providing reliable and fast access to essential software resources within Iran.")
19+
},1000)

0 commit comments

Comments
 (0)