added background to hero more anims for pages

1337faye · May 3, 2024 · b4cb97f · b4cb97f
1 parent 17cf48d
commit b4cb97f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -47,20 +47,23 @@
             </div>
         </nav>
     </header>
-
-    <section class="indexHero">
-        <div class="indexHeroText">
-            <h4>A Honkai: Star Rail Guide Website</h4>
-            <h1>zenridev</h1>
-            <p>ultra cool company created by this really cool dude called zenri and he made a tier list that has NEVER
-                ever pissed anyone off and caused nuclear drama. in fact, this tier list brought everyone together and
-                ended world peace because it was so good.</p>
-            <a href="./characters"><i class="ri-user-fill"></i>Characters</a>
-            <a href="./tierlist" class="indexSecondButton"><i class="ri-file-list-3-fill"></i>Tier List</a>
-        </div>
-        <img src="./images/indexHeroImage.webp" class="indexHeroImage"></a>
-    </section>
-
+    <div class="indexBackgroundImage">
+        <section class="indexHero">
+            <div class="indexHeroText">
+                <h4>A Honkai: Star Rail Guide Website</h4>
+                <h1>zenridev</h1>
+                <p>ultra cool company created by this really cool dude called zenri and he made a tier list that has
+                    NEVER
+                    ever pissed anyone off and caused nuclear drama. in fact, this tier list brought everyone
+                    together
+                    and
+                    ended world peace because it was so good.</p>
+                <a href="./characters"><i class="ri-user-fill"></i>Characters</a>
+                <a href="./tierlist" class="indexSecondButton"><i class="ri-file-list-3-fill"></i>Tier List</a>
+            </div>
+            <img src="./images/indexHeroImage.webp" class="indexHeroImage"></a>
+        </section>
+    </div>
     <!-- <div class="indexHeroSocials">
         <a href="#"><i class="ri-twitter-x-fill"></i></a>
         <a href="#"><i class="ri-youtube-fill"></i></a>
@@ -113,7 +116,7 @@ <h3>5AJTZPPMN8VB</h3>
         </div>
     </section>
     <section class="indexEvents">
-        <h1 class="indexCodesHeading">Banners</h1>
+        <h1 class="indexCarouselHeading">Banners</h1>
         <div class="indexCarousel">
             <div class="carouselWrapper">
                 <i id="left" class="ri-arrow-left-s-line" style="z-index: 100;"></i>

diff --git a/script.js b/script.js
@@ -25,11 +25,18 @@ const sr = ScrollReveal({
 
 sr.reveal(".indexHeroText", { delay: 0, origin: "top" });
 sr.reveal(".indexHeroImage", { delay: 100, origin: "top" });
-sr.reveal(".indexCodes", { delay: 200, origin: "bottom" });
+sr.reveal(".indexCodesHeading", { delay: 0, origin: "bottom" });
+sr.reveal(".indexCodesGrid", { delay: 100, origin: "bottom" });
+sr.reveal(".indexCarouselHeading", { delay: 0, origin: "bottom" });
+sr.reveal(".indexCarousel", { delay: 0, origin: "bottom" });
+
 sr.reveal(".charactersHeading", { delay: 0, origin: "top" });
-sr.reveal(".charactersSearchBar", { delay: 100, origin: "top" });
+sr.reveal(".charactersSearchBar", { delay: 50, origin: "top" });
 sr.reveal(".charactersGridBox", { delay: 0, origin: "bottom" });
 
+sr.reveal(".tierListHeader", { delay: 50, origin: "top" });
+sr.reveal(".tierList", { delay: 50, origin: "bottom" });
+
 // search bar
 
 const search = () => {

diff --git a/styles/style.css b/styles/style.css
@@ -217,22 +217,32 @@ footer {
 
 /* -------------------------------------------------------------------index.html---------------------------------------------------------------------------------- */
 
-.indexHero {
-  height: 100%;
+.indexBackgroundImage {
+  background-image: url(https://upload-os-bbs.hoyolab.com/upload/2024/02/10/17138284/966d24a314eab25030f70dc295c8db6a_3773521663887643236.png?x-oss-process=image%2Fresize%2Cs_1000%2Fauto-orient%2C0%2Finterlace%2C1%2Fformat%2Cwebp%2Fquality%2Cq_80);
+  position: relative;
+  background-size: cover;
+  padding: 16px;
+}
+
+.indexBackgroundImage::before {
+  content: "";
   width: 100%;
-  min-height: 60vh;
-  /* background: linear-gradient(
-    245.59deg,
-    #29315c 0%,
-    #182449 28.53%,
-    #0a1336 75.52%
-  ); */
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1;
+}
+
+.indexHero {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 2rem;
   padding: 0 19%;
+  z-index: 2;
 }
 
 .indexHeroText h1 {
@@ -367,6 +377,7 @@ footer {
 .indexCodes {
   padding: 2% 10%;
   background-color: #182449;
+  z-index: 3;
 }
 
 .indexCodesHeading {
@@ -405,6 +416,13 @@ footer {
   padding: 2% 10%;
   background-color: #0a1336;
 }
+
+.indexCarouselHeading {
+  padding-bottom: 15px;
+  color: #e6f7ff;
+  font-size: 2rem;
+}
+
 .indexCarousel {
   display: flex;
   justify-content: center;

diff --git a/tierlist.html b/tierlist.html
@@ -488,7 +488,7 @@ <h4>Support Us</h4>
     </footer>
 
     <!-- scroll reveal effect -->
-    <!-- <script src="https://unpkg.com/scrollreveal"></script> -->
+    <script src="https://unpkg.com/scrollreveal"></script>
 
     <!-- custom javascript link -->
     <script src="script.js"></script>