added animations

added animations in bookmarks and main page for buttons and when starting page
boudywho · May 17, 2024 · 21b7782 · 21b7782
1 parent 695c0a3
commit 21b7782
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
       <h1>•* ⁀ ➷ This is Boudy! .ೃ࿐</h1>
       <h2 id="date"></h2>
 
-      <div style="position: relative;left: 90px;">
+      <div class="nav-section" style="position: relative;left: 90px;">
         <ul>
           <li>~/general </li>
           <li><a href="https://t.me/boudywho">Telegram ೃ⁀➷</a></li>
@@ -24,7 +24,7 @@ <h2 id="date"></h2>
           <li><a href="https://monkeytype.com/profile/boudywho/">MonkeyType</a></li>
         </ul>
       </div>
-      <div style="position: relative;left: 90px;">
+      <div class="nav-section" style="position: relative;left: 90px;">
         <ul>
           <li>~/dev </li>
           <li><a href="https://github.com/boudywho">GitHub .・゜✧</a></li>
@@ -33,15 +33,15 @@ <h2 id="date"></h2>
           <li><a href="https://aur.archlinux.org/">AUR</a></li>
         </ul>
       </div>
-      <div style="position: relative;left: 90px;">
+      <div class="nav-section" style="position: relative;left: 90px;">
         <ul>
           <li>~/school (Personal Links)</li>
           <li><a href="https://notion.so">Notion</a></li>
           <li><a href="https://keep.google.com/u/0/">Google Keep</a></li>
           <li><a href="https://www.wojodacademy.com/dashboard">Wojod</a></li>
         </ul>
       </div>
-      <div style="position: relative;left: 90px;">
+      <div class="nav-section" style="position: relative;left: 90px;">
         <ul>
           <li>~/reddit </li>
           <li><a href="https://www.reddit.com/user/boudywho">Reddit</a></li>
@@ -65,4 +65,4 @@ <h3>
     <script type="text/javascript" src="index.js"></script>
   </body>
 
-</html>
+</html>
diff --git a/links.html b/links.html
@@ -14,7 +14,7 @@
             <h1>•* ⁀ ➷ My Bookmark .ೃ࿐</h1>
             <h2> Poor Choice of Colors? DM ME! </h2>
 
-            <div style="position: relative;left: 90px;">
+            <div class="nav-section" style="position: relative;left: 90px;">
                 <ul>
                     <li>~/Android Modded APKS</li>
                     <li><a href="https://modyolo.com/">Modyolo</a></li>
@@ -25,7 +25,7 @@ <h2> Poor Choice of Colors? DM ME! </h2>
                     <li><a href="https://androeed.ru/">Androeed (Use Translator)</a></li>
                 </ul>
             </div>
-            <div style="position: relative;left: 90px;">
+            <div class="nav-section" style="position: relative;left: 90px;">
                 <ul>
                     <li>~/On My Phone. 1</li>
                     <li><a href="https://revanced.app/">Revanced</a></li>
@@ -36,7 +36,7 @@ <h2> Poor Choice of Colors? DM ME! </h2>
                     <li><a href=""></a></li>
                 </ul>
             </div>
-            <div style="position: relative;left: 90px;">
+            <div class="nav-section" style="position: relative;left: 90px;">
                 <ul>
                     <li>~/Social Media Mods</li>
                     <li><a href="https://github.com/vendetta-mod/Vendetta">Custom Discord Client</a></li>
@@ -46,7 +46,7 @@ <h2> Poor Choice of Colors? DM ME! </h2>
                     <li><a href="https://fmmods.com/fouad-snapchat/">Snapchat</a></li>
                 </ul>
             </div>
-            <div style="position: relative;left: 90px;">
+            <div class="nav-section" style="position: relative;left: 90px;">
                 <ul>
                     <li>~/On My Phone. 2</li>
                     <li><a href="https://exteragram.app/">Telegram Client</a></li>
@@ -68,4 +68,4 @@ <h3>
         <script type="text/javascript" src="index.js"></script>
     </body>
 
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -46,6 +46,7 @@ h1 {
   grid-column: 1/-1;
   text-align: center;
   margin-bottom: 0;
+  animation: fadeIn 1s ease-in-out;
 }
 
 h2 {
@@ -55,6 +56,7 @@ h2 {
   grid-column: 1/-1;
   text-align: center;
   margin-bottom: 2.3em;
+  animation: fadeIn 1s ease-in-out;
 }
 
 ul {
@@ -67,6 +69,32 @@ ul {
 li {
   line-height: 1.4em;
   margin-left: 4.8em;
+  opacity: 0;
+  animation: slideIn 1s ease-in-out forwards;
+}
+
+li:nth-child(1) {
+  animation-delay: 0.1s;
+}
+
+li:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+li:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+li:nth-child(4) {
+  animation-delay: 0.4s;
+}
+
+li:nth-child(5) {
+  animation-delay: 0.5s;
+}
+
+li:nth-child(6) {
+  animation-delay: 0.6s;
 }
 
 li:first-child {
@@ -77,12 +105,16 @@ li:first-child {
   text-align: center;
   line-height: 2em;
   margin-left: 2.5em;
+  opacity: 0;
+  animation: fadeIn 1s ease-in-out forwards;
+  animation-delay: 0s;
 }
 
 a {
   color: #b66d61;
   font-size: 1.1em;
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 a:hover {
@@ -91,11 +123,65 @@ a:hover {
 }
 
 .curved-border {
-  border-radius: 2em; /* Adjust this value to control how much the border curves */
-  padding: .2em 1em; /* Adjust these values to control the size of the link */
-  background-color: transparent; /* Makes the background transparent */
-  color: #dcc6a0; /* Change this to the color you want for the text */
-  text-decoration: none; /* Removes the default underline from the link */
-  border: 1px solid rgb(146, 82, 82); /* Adds a Brownish Border */
+  border-radius: 2em;
+  padding: .2em 1em;
+  background-color: transparent;
+  color: #dcc6a0;
+  text-decoration: none;
+  border: 1px solid rgb(146, 82, 82);
   white-space: nowrap;
- }
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: inline-block; /* Required for button animations to work properly */
+}
+
+.curved-border:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+  animation: buttonPulse 1s infinite alternate; /* Added button animation */
+}
+
+/* Animations */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.nav-section {
+  animation: fadeInUp 1s ease-in-out;
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Button Animation */
+@keyframes buttonPulse {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
diff --git a/stylelinks.css b/stylelinks.css
@@ -46,6 +46,7 @@ h1 {
   grid-column: 1/-1;
   text-align: center;
   margin-bottom: 0;
+  animation: fadeIn 1s ease-in-out;
 }
 
 h2 {
@@ -55,6 +56,7 @@ h2 {
   grid-column: 1/-1;
   text-align: center;
   margin-bottom: 2.3em;
+  animation: fadeIn 1s ease-in-out;
 }
 
 ul {
@@ -67,6 +69,36 @@ ul {
 li {
   line-height: 1.4em;
   margin-left: 4.8em;
+  opacity: 0;
+  animation: slideIn 1s ease-in-out forwards;
+}
+
+li:nth-child(1) {
+  animation-delay: 0.1s;
+}
+
+li:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+li:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+li:nth-child(4) {
+  animation-delay: 0.4s;
+}
+
+li:nth-child(5) {
+  animation-delay: 0.5s;
+}
+
+li:nth-child(6) {
+  animation-delay: 0.6s;
+}
+
+li:nth-child(7) {
+  animation-delay: 0.7s;
 }
 
 li:first-child {
@@ -77,13 +109,17 @@ li:first-child {
   text-align: center;
   line-height: 2em;
   margin-left: 2.5em;
+  opacity: 0;
+  animation: fadeIn 1s ease-in-out forwards;
+  animation-delay: 0s;
 }
 
 a {
   color: #421919;
   font-size: 1.1em;
   text-decoration: none;
   white-space: nowrap;
+  transition: color 0.3s ease;
 }
 
 a:hover {
@@ -92,11 +128,53 @@ a:hover {
 }
 
 .curved-border {
-  border-radius: 2em; /* Adjust this value to control how much the border curves */
-  padding: .2em 1em; /* Adjust these values to control the size of the link */
-  background-color: transparent; /* Makes the background transparent */
-  color: #dcc6a0; /* Change this to the color you want for the text */
-  text-decoration: none; /* Removes the default underline from the link */
-  border: 1px solid black; /* Adds a black border */
+  border-radius: 2em; 
+  padding: .2em 1em; 
+  background-color: transparent;
+  color: #dcc6a0;
+  text-decoration: none;
+  border: 1px solid black;
   white-space: nowrap;
- }
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+ }
+
+.curved-border:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.nav-section {
+  animation: fadeInUp 1s ease-in-out;
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}