Add scroll animation (#1164)

* fix vote period hero background image * add scroll animation * fix background order * test * Revert "test" This reverts commit 674c476.
AstarNetwork · Feb 6, 2024 · 20dc746 · 20dc746
1 parent a23cb2f
commit 20dc746
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 13 deletions.
diff --git a/src/components/header/ClaimWarningBanner.vue b/src/components/header/ClaimWarningBanner.vue
@@ -46,7 +46,7 @@ export default defineComponent({
  padding: 4px 8px 8px 8px;
  font-size: 12px;
  position: relative;
- z-index: 1;
+ z-index: 2;
  display: flex;
  align-items: center;
  @media (min-width: $sm) {

diff --git a/src/staking-v3/assets/leaderboard_bg.webp b/src/staking-v3/assets/leaderboard_bg.webp
diff --git a/src/staking-v3/assets/vote_hero_bg.webp b/src/staking-v3/assets/vote_hero_bg.webp
diff --git a/src/staking-v3/components/leaderboard/styles/leaderboard.scss b/src/staking-v3/components/leaderboard/styles/leaderboard.scss
@@ -5,7 +5,6 @@
  padding: 100px 0 20px 0;
  position: relative;
  background-color: $navy-1;
- overflow: hidden;
  @media (min-width: $lg) {
  padding-right: 40px;
  padding-left: 40px;
@@ -21,12 +20,23 @@
  }
 }
 
+@keyframes parallax-small-anim {
+ from {
+ transform: translateY(0px);
+ }
+ to {
+ transform: translateY(-3000px);
+ }
+}
+
 .bg--leaderboard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
+ animation: parallax-small-anim linear;
+ animation-timeline: scroll();
  img {
  width: 100%;
  }

diff --git a/src/staking-v3/components/styles/discover-v3.scss b/src/staking-v3/components/styles/discover-v3.scss
@@ -16,6 +16,9 @@
  width: 100%;
  padding: 80px 0;
  background-repeat: repeat;
+ background-color: white;
+ position: relative;
+ z-index: 1;
  @media (min-width: $lg) {
  padding-right: 40px;
  padding-left: 40px;

diff --git a/src/staking-v3/components/styles/feature-dapp.scss b/src/staking-v3/components/styles/feature-dapp.scss
@@ -2,7 +2,6 @@
 
 .wrapper--promo {
  width: 100%;
- z-index: 1;
  position: relative;
  @media (min-width: $lg) {
  padding-right: 40px;
@@ -14,11 +13,24 @@
  margin: auto;
  max-width: $container-max-width;
  padding: 0 16px;
+ position: relative;
+ z-index: 1;
+ animation: parallax-small-anim linear;
+ animation-timeline: scroll();
  @media (min-width: $lg) {
  padding: 0;
  }
 }
 
+@keyframes parallax-small-anim {
+ from {
+ transform: translateY(0px);
+ }
+ to {
+ transform: translateY(200px);
+ }
+}
+
 .row--title {
  margin-top: 34px;
  margin-bottom: 8px;
@@ -208,19 +220,15 @@
  top: 0;
  left: 0;
  right: 0;
+ bottom: 0;
  z-index: 1;
  mix-blend-mode: multiply;
- @media (min-width: $lg) {
- top: -36px;
- }
  img {
- height: 100vw;
- object-fit: cover;
+ max-width: 1340px;
+ width: 100%;
+ height: 100%;
  margin: auto;
- @media (min-width: $sm) {
- max-width: 1100px;
- width: 100%;
- height: auto;
- }
+ object-fit: cover;
+ overflow: visible;
  }
 }