fix animations

readyplayerme · Oct 1, 2024 · d6ca887 · d6ca887
1 parent 139337e
commit d6ca887
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -16,10 +16,10 @@ export default async ({ data }) => {
 
             <main class="main">
                 <section class="intro">
-                    {/* <div class="intro__bg">
+                    <div class="intro__bg">
                         <video muted loop playsinline autoplay src="/assets/images/intro-video.mp4" type="video/mp4"></video>
-                        <img src="/assets/images/intro-bg.png" alt="" />
-                    </div> */}
+                        {/* <img src="/assets/images/intro-bg.png" alt="" /> */}
+                    </div>
 
                     <div class="intro__container">
                         <div class="intro__wrap">
@@ -32,9 +32,9 @@ export default async ({ data }) => {
 
                                 <div class="intro__button">
                                     <button class="button-play">
-                                        /* <i></i>
+                                        <i></i>
                                         <svg class="svg-icon" viewBox="0 0 105 43" width="105" height="43" style="width: 105rem; height: 43rem;"><use xlink:href="#svg-play-icon"></use></svg>
-                                        <svg class="svg-icon" viewBox="0 0 101 38" width="101" height="38" style="width: 101rem; height: 38rem;"><use xlink:href="#svg-play-text"></use></svg> */
+                                        <svg class="svg-icon" viewBox="0 0 101 38" width="101" height="38" style="width: 101rem; height: 38rem;"><use xlink:href="#svg-play-text"></use></svg>
 {/* 
                                         <svg class="svg-icon svg-icon--icon" viewBox="0 0 105 43" width="105" height="43"><use xlink:href="#svg-play-icon"></use></svg>
                                         <svg class="svg-icon svg-icon--text" viewBox="0 0 101 38" width="101" height="38"><use xlink:href="#svg-play-text"></use></svg>

diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -36,6 +36,7 @@
 	min-width: 267rem;
 	color: rgba($white100, .8);
 	background-color: #2C2B5D;
+	overflow: hidden;
 
 	svg {
 		position: relative;

diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss
@@ -15,16 +15,31 @@
 	background-size: cover;
 	background-blend-mode: lighten;
 	position: relative;
+
+	video {
+		width: 100%;
+		object-fit: contain;
+	}
 
 	&__bg {
-		pointer-events: none;
 		position: absolute;
 		top: 0;
-		left: 0;
 		right: 0;
 		bottom: 0;
-		background: url(/assets/images/playerzero_trails_compressed.png) 0% 0 repeat-x;
-		animation: flow 3s linear infinite forwards;
+		left: 0;
+
+		&::before {
+			content: '';
+			pointer-events: none;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 1;
+			background: url(/assets/images/playerzero_trails_compressed.png) 0% 0 repeat-x;
+			animation: flow 3s linear infinite forwards;
+		}
 	}
 
 	&__container {