CSSファイルの分割

ics-creative · Oct 24, 2024 · a44c88e · a44c88e
1 parent b02444d
commit a44c88e
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 206 deletions.
diff --git a/src/assets/styles/intersectionAnimation.css b/src/assets/styles/intersectionAnimation.css
@@ -0,0 +1,71 @@
+.intersectionAnimation {
+  position: relative;
+  height: 480px;
+}
+
+.intersectionAnimationImage {
+  position: absolute;
+  display: block;
+  width: 640px;
+  height: 480px;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+  mask-repeat: no-repeat;
+  animation-duration: 6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* 山の画像のマスク */
+.intersectionAnimationImage1 {
+  mask-image: url("/assets/images/intersection_mask1.png");
+  animation-name: intersection1;
+}
+
+/* 海の画像のマスク */
+.intersectionAnimationImage2 {
+  mask-image: url("/assets/images/intersection_mask2.png");
+  animation-name: intersection2;
+}
+
+/* 街の画像のマスク */
+.intersectionAnimationImage3 {
+  mask-image: url("/assets/images/intersection_mask1.png"),
+    url("/assets/images/intersection_mask2.png");
+  mask-composite: intersect;
+  animation-name: intersection3;
+}
+
+@keyframes intersection1 {
+  0% {
+    mask-position: -1280px 0;
+  }
+
+  100% {
+    mask-position: 0 0;
+  }
+}
+
+@keyframes intersection2 {
+  0% {
+    mask-position: right -1280px bottom 0;
+  }
+
+  100% {
+    mask-position: right 0 bottom 0;
+  }
+}
+
+@keyframes intersection3 {
+  0% {
+    mask-position:
+      -1280px 0,
+      right -1280px bottom 0;
+  }
+
+  100% {
+    mask-position:
+      0 0,
+      right 0 bottom 0;
+  }
+}
diff --git a/src/assets/styles/maskAnimation.css b/src/assets/styles/maskAnimation.css
@@ -1,209 +1,7 @@
+@import url("./intersectionAnimation.css");
+@import url("./transitionAnimation.css");
+@import url("./scrollAnimation.css");
+
 .animationSection {
   margin-bottom: 64px;
 }
-
-.intersectionAnimation {
-  position: relative;
-  height: 480px;
-}
-
-.intersectionAnimationImage {
-  position: absolute;
-  display: block;
-  width: 640px;
-  height: 480px;
-  aspect-ratio: 4/3;
-  object-fit: cover;
-  mask-repeat: no-repeat;
-  animation-duration: 6s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-/* 山の画像のマスク */
-.intersectionAnimationImage1 {
-  mask-image: url("/assets/images/intersection_mask1.png");
-  animation-name: intersection1;
-}
-
-/* 海の画像のマスク */
-.intersectionAnimationImage2 {
-  mask-image: url("/assets/images/intersection_mask2.png");
-  animation-name: intersection2;
-}
-
-/* 街の画像のマスク */
-.intersectionAnimationImage3 {
-  mask-image: url("/assets/images/intersection_mask1.png"),
-    url("/assets/images/intersection_mask2.png");
-  mask-composite: intersect;
-  animation-name: intersection3;
-}
-
-@keyframes intersection1 {
-  0% {
-    mask-position: -1280px 0;
-  }
-
-  100% {
-    mask-position: 0 0;
-  }
-}
-
-@keyframes intersection2 {
-  0% {
-    mask-position: right -1280px bottom 0;
-  }
-
-  100% {
-    mask-position: right 0 bottom 0;
-  }
-}
-
-@keyframes intersection3 {
-  0% {
-    mask-position:
-      -1280px 0,
-      right -1280px bottom 0;
-  }
-
-  100% {
-    mask-position:
-      0 0,
-      right 0 bottom 0;
-  }
-}
-
-.transitionAnimationImage {
-  display: block;
-  width: 640px;
-  height: 480px;
-  aspect-ratio: 4/3;
-  object-fit: cover;
-}
-
-.transitionAnimation {
-  position: relative;
-}
-
-.transitionAnimationMask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  mask-image: linear-gradient(#000, #000), url("/assets/images/mask_circle.svg");
-  mask-repeat: no-repeat;
-  mask-position:
-    0 0,
-    center center;
-  mask-size:
-    100% 100%,
-    0 0;
-  mask-composite: exclude;
-  animation-timing-function: var(--ease-out-quart);
-  animation-fill-mode: forwards;
-}
-
-.transitionAnimationMask1 {
-  background-color: var(--color-primary);
-  animation-duration: 1s;
-  animation-delay: 0.2s;
-
-  &.isActive {
-    animation-name: maskAnimation;
-  }
-}
-
-.transitionAnimationMask2 {
-  background-color: var(--color-secondary);
-  animation-duration: 1.1s;
-
-  &.isActive {
-    animation-name: maskAnimation;
-  }
-}
-
-@keyframes maskAnimation {
-  0% {
-    mask-size:
-      100% 100%,
-      0 0;
-  }
-
-  100% {
-    mask-size:
-      100% 100%,
-      800px 800px;
-  }
-}
-
-.scrollMask {
-  position: relative;
-  width: 640px;
-  height: 480px;
-  overflow: hidden auto;
-  overscroll-behavior-y: none;
-  scrollbar-gutter: stable;
-}
-
-.scrollMaskInner {
-  width: 100%;
-  height: 1600px;
-}
-
-.wall {
-  position: sticky;
-  top: 0;
-  width: 640px;
-  height: 480px;
-  overflow: hidden;
-}
-
-.wallMask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-primary);
-  mask-image: linear-gradient(#000, #000),
-    radial-gradient(#000 0, #000 50%, transparent 50%, transparent 100%);
-  mask-repeat: no-repeat;
-  mask-position:
-    0 0,
-    324px 237px; /* 「O」の穴に合う位置 */
-
-  mask-size:
-    100% 100%,
-    16px 18px; /* 「O」の穴に合うサイズ */
-
-  mask-composite: exclude;
-  transform-origin: 331px 246px; /* 拡大した時「O」の穴の中心が起点となるような位置 */
-}
-
-.text {
-  position: absolute;
-  top: 229px;
-  left: 308px;
-  z-index: 1;
-  font-size: 22px;
-  font-weight: bold;
-  transform-origin: 24.5px 18px;
-  -webkit-font-smoothing: antialiased;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-.wallImage {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  display: block;
-  width: 640px;
-  height: 480px;
-  aspect-ratio: 4/3;
-  margin-top: -480px;
-  object-fit: cover;
-}
diff --git a/src/assets/styles/scrollAnimation.css b/src/assets/styles/scrollAnimation.css
@@ -0,0 +1,69 @@
+.scrollMask {
+  position: relative;
+  width: 640px;
+  height: 480px;
+  overflow: hidden auto;
+  overscroll-behavior-y: none;
+  scrollbar-gutter: stable;
+}
+
+.scrollMaskInner {
+  width: 100%;
+  height: 1600px;
+}
+
+.wall {
+  position: sticky;
+  top: 0;
+  width: 640px;
+  height: 480px;
+  overflow: hidden;
+}
+
+.wallMask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-primary);
+  mask-image: linear-gradient(#000, #000),
+    radial-gradient(#000 0, #000 50%, transparent 50%, transparent 100%);
+  mask-repeat: no-repeat;
+  mask-position:
+    0 0,
+    324px 237px; /* 「O」の穴に合う位置 */
+
+  mask-size:
+    100% 100%,
+    16px 18px; /* 「O」の穴に合うサイズ */
+
+  mask-composite: exclude;
+  transform-origin: 331px 246px; /* 拡大した時「O」の穴の中心が起点となるような位置 */
+}
+
+.text {
+  position: absolute;
+  top: 229px;
+  left: 308px;
+  z-index: 1;
+  font-size: 22px;
+  font-weight: bold;
+  transform-origin: 24.5px 18px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.wallImage {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 640px;
+  height: 480px;
+  aspect-ratio: 4/3;
+  margin-top: -480px;
+  object-fit: cover;
+}